On 2012-02-15 16:57, Nick Sabalausky wrote:
"Ludovic Silvestre"<[email protected]> wrote in message
news:[email protected]...
I was wondering why the text seemed to be a completely different size on
different browsers!
First of all, I recommend to use % for the body's font-size (which you are
already using) and the rest should be set with em. That way, the body
font-size will be equal to the browser default font size, and the rest of
the page will be based on that size.
Yes. This.
Another suggestion is using something like this:
http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/
Here is an example of the js code:
function updateFontSize(){
msg = document.body.clientWidth;
var font_math = Math.round( 0.012 * msg * 10 );
font_math = font_math< 100 ? 100 : font_math;
$( "body" ).css({
"font-size" : font_math + "%"
});
}
Use that function on page load and page refresh:
$( window ).resize( ... )
$( document ).ready( ... )
That's not good (and I don't mean because of the JS - it's always possible
to have non-JS fallback). This is a classic case of narrowly optimizing for
one specific metric (ie, getting a consistent words-per-line) instead of
always keeping an eye on the big picture. The problem this creates is that
font sizes become too uncontrolled:
First of all, shrinking the window *should* re-flow the text, not cause it
to be too small to read. A shorter line length is *much* better than tiny
text.
This site is a great example of a design that reflows when resizing the
window: http://upperdog.se/ . It works great on both desktop browsers
and mobile devices.
--
/Jacob Carlborg
