2

Many times windows 7 users, go at Control Panel - Display Options and choose a custom DPI setting (ie 110%) to increase font size in cases that they have big monitors and cannot see clearly.

In this case, some of the web designs break in the latest version of Opera 11 and Internet Explorer 9. (One web design breaks in one browser, and the other design in the other browser!). This does not happen in all computers with dpi scaling. In some computer it breaks on IE9, on some other it doesn't.

What I mean is that fonts become huge, and textes go out of their boxes, breaking the correct flow of elements.

I just use the standard fonts.

I prefer to use HTML5/CSS3. I usually use reset.css or normalize.css lately from HTML5 boilerplate.

How I should develop, or what css hacks I should include to avoid dpi scaling break the designs?

I understand this is not a normal cross-browser compatibility question, but a very strange situation that happens only in specific cases, with specific browser-computer combination, but all those computers have dpi scaling. The matter is that with the same browser and same dpi scaling, the same problem may appear or not appear.

Improve this question

2 Answers 2

Reset to default
1

This isn't really any different from the problem of people using way too low a resolution to view your site or using their browser zoom to increase the text size.

There's not much you can do about it except to test for it manually and see what is actually "breaking" the layout. But every layout is going to have practical limits on supported platforms and configurations.

You can explicitly specify the overflow mode for every single text containing element (and all of its parents), but you'll still end up with problems with different browsers rendering the same fonts slightly differently or variations in line-wrap or text-alignment/justification algorithms.

Improve this answer
0

The problem was about having fonts defined in em, whereas container width was in pixels. Settings fonts also in pixels, resolves the problem.

Each browser was behaving differently in this case.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.