On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed:

Looking for insight into (and potential correction to) the latest Firefox
browsers inflating the overall size/resolution of webpages. We use a
mobile first responsive upwards, and in the newest Firefox browsers, what
is a reasonable font size in every other browser becomes ludicrously large
in Firefox on high resolution monitors.  From what I'm seeing on the dev
pages, this is intentional for sites that do not use large font sizing
(most) at the high resolutions. But we are doing so in our newest sites.

I'd rather not deliver FF specific font sizing, but will if I must. Any
ideas? Fixes? Things to avoid?

You're using px for sizing text and its containers, right? If yes, stop doing
that, and the "problem" will disappear. In the first place, it's only the
user who is in position to determine "reasonable font size", which size is
presumptively the size configured as her personalizable browser default, CSS
medium. When you respect a user's default by leaving the base size unaltered,
and only apply relative sizing via keywords, em, rem or % to elements that
actually need a contextual sizing adjustment, the integers-only Gecko device
px to CSS px ratio and display density/"high" resolution are non-issues.

The math involved with not using px is simple enough. Just think of one px as
.0625rem (1/16). If you want a block to be 960px wide, divide by 16, which
makes it 60rem. In viewports in which the as-shipped 16px default remains in
effect, 60rem will be 960px, while in those using higher densities, more px
will be used, but your design proportions will be preserved.
--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to