What does <meta name="viewport" content="width=device-width"> do in landscape mode on iOS?

html ios webkit viewport
Brandon Lebedev picture Brandon Lebedev · Dec 21, 2012 · Viewed 39.3k times · Source

I'm trying to understand the scaling attributes on iOS.

  1. 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).

  2. 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.

  3. 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?

Answer

Brandon Lebedev picture Brandon Lebedev · Dec 21, 2012

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".

Related questions

HTML5 Video autoplay on iPhone

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one: This works perfectly fine on most browsers (IE struggles with this object-fit thing but I …

Read More
How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More