Menu
I'm trying to understand the scaling attributes on iOS.
According to Apple's Developer Docs, declaring <meta name="viewport" content="width=device-width"> will tell iOS to scale a webpage to a 1:1 pixel ratio when the page loads (in portrait mode).
According to a presentation by the folks at HTML5Boilerplate (see slide 13), device-width will always correspond to the smaller measure of an iOS device's screen, regardless of the device's orientation.
Therefore, if you load a page in iOS with the <meta name="viewport" content="width=device-width"> declaration while holding the device in a landscape orientation, iOS will set the viewport's width according to what appears to be the screen's height, resulting in a 1.5:1 (iPhone 4s) or 2:1 (iPhone 5) pixel ratio.
Am I correct, or am I misunderstanding the definition of "width" and "device-width" as Apple uses them?
Furthermore, when an iOS device rotates, what does the viewport maintain? It's width, or it's scale? Does it depend on the meta settings?
214
The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you're not actually changing your site's design for mobile, and it renders better with a larger or smaller virtual viewport.
Setting The Viewport The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The term viewport refers to the size of a window or visible area on a screen. In general, this term is used for displays on mobile devices such as smartphones and tablets.
Default Viewport Settings The default width is 980 pixels.
According to Apple's Developer Docs:
"Similarly, if you specify only the viewport width, the height and initial scale are inferred. Notice that... the landscape orientation maintains a width equal to device-width, which changes the initial scale and has the effect of zooming in when the user changes to landscape orientation."
The article states that iOS keeps the same viewport setting regardless of orientation or rotating the device.
See here, under "How Safari Infers the Width, Height, and Initial Scale".
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
