: DPI scaling - fonts - Browser Compatibility Problems 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
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.
More posts by @Barnes591
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.