09-08-2015, 02:22 PM
So, I'm a Browser Developer for mobile. This basically comes down to "viewports"
You design a website and put it online. Woo hoo! On desktop it displays great, but how does it look on a screen that's only a couple inches across?
Well, do the pieces of your design move around? How wide is the content? How much is text?
Mobile browsers have a helluva time figuring out what is the appropriate width to lay out a page. On desktop, it's whatever width the window is. On mobile, it's at some unknown zoom scale.
Browser use certain techniques and heuristics to try and guess what might be an appropriate width. And there are features like Text Auto-Sizing to make sure text is readable even if the width results in a zoom scale that would make large type look like fine print.
But the best way by far is to have the site author explicitly state in the web page: THIS is the width you should lay it out to. This is by means of placing a viewport meta tag within the site's head, like Mozilla recommends:
The mobile version of this website doesn't have a valid viewport tag, otherwise your mobile browser wouldn't have to guess (and guess wrong) at the appropriate width to lay out the page.
You design a website and put it online. Woo hoo! On desktop it displays great, but how does it look on a screen that's only a couple inches across?
Well, do the pieces of your design move around? How wide is the content? How much is text?
Mobile browsers have a helluva time figuring out what is the appropriate width to lay out a page. On desktop, it's whatever width the window is. On mobile, it's at some unknown zoom scale.
Browser use certain techniques and heuristics to try and guess what might be an appropriate width. And there are features like Text Auto-Sizing to make sure text is readable even if the width results in a zoom scale that would make large type look like fine print.
But the best way by far is to have the site author explicitly state in the web page: THIS is the width you should lay it out to. This is by means of placing a viewport meta tag within the site's head, like Mozilla recommends:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">The mobile version of this website doesn't have a valid viewport tag, otherwise your mobile browser wouldn't have to guess (and guess wrong) at the appropriate width to lay out the page.