Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You're goning to need <meta name="viewport" content="width=device-width, initial-scale=1"> tag for any reactive design with mobile browsers since otherwise the site will look completely different between browsers and browser versions as they use different rules for how to render sites.

The worst part of this is that simple mostly text sites without a fixed-with layout would look perfectly on mobile if this tag was the default but somehow mobile browser vendors thought it was better to hack around sites with table layouts by giving them a larger viewport (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts).



> (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts)

Once you start with the hack of giving non-mobile-compatible pages a larger viewport in order to not break layouts that react allergic when being squeezed into 300-something pixels, what else do you want to do?

Not scaling font sizes at all just gives you either tiny text (if you zoom out to fit the large viewport onto the small mobile screen) or loads of scrolling around if you display the page at 100 % zoom level instead.

And scaling up all text means you end up approximatively just where you started before you started resizing the viewport. It might not be absolutely exactly the same layout breakage as when squeezing an old page directly into the 300 or so pixels available on a mobile phone in portrait mode, but it will be pretty similar.

So that only leaves trying to scale up only the main body of text (which normally isn't that sensitive with regards to scaling up the font size and therefore increasing its size requirements) and leaving alone smaller bits of text like menus, the page navigation etc., which are more likely to be size-constrained and start causing layout breakage if increased by an extraordinary amount.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: