Initial Scale – Mobile Web Development


I did want to mention at this point that there are other viewpoint controls. There’s an initial scale property that let’s you set what the browser’s initial scaling factor will be. It defaults to one and usually, you don’t really want to mess with it. If you change it to another number, this changes the initial zoom factor. And the user will probably have to pan or zoom. There is one very critical use to initial scale though. On iOS, if you only set width to device width and you don’t set the initial scale, like in this page, when you rotate the screen the iOS web engine will keep the same view port width and rescale it to fit across the landscape screen. It’s just stretching the portrait layout, to fit, across the landscape width. Even though I’ve set width to device width, IOS is still scaling the landscape width. In fact, the interesting bit. is that even if you load this page initially in landscape mode, it still thinks it’s the portrait width, it just rescaling it to fit in the landscape screen. Now, if you have the same page, but you set the initial scale to 1 in the viewport meta-element along with setting device width, it’ll change the viewport size when you rotate, instead of rescaling. You can see now the window size is 480 pixels across. It’s the landscape width, not the portrait width. So, in short, this is what you really need to use as your default boiler plate viewport meta-element. You’ll need the initial scale, so that IRS, when flipping from portrait to landscape mode will still scale correctly. An interesting side note I discovered is that on Iphones – Although they are changing the viewport size properly if an initial scale is that, they are also changing the default font size for the document and orientation change, effectively zooming up the text when you go to landscape mode. This means you should probably set a default font size on the page, not just use an percentages. You may want to use a reset style sheet to do this, if you aren’t already.

Add a Comment

Your email address will not be published. Required fields are marked *