Viewport meta tag for iOS devices

ipad html viewport meta-tags
pingu picture pingu · Oct 25, 2011 · Viewed 50.8k times · Source

Does stating

<meta name="viewport" content="width=device-width" />

have the same effect as stating

<meta name="viewport" content="width=768" />

for the ipad?

Answer

andreasbovens picture andreasbovens · Oct 25, 2011

It depends indeed on the orientation of the device: setting a specific pixel value will cause your layout to be scaled up with a factor of 1.333 to fit inside the 1024px device width when in landscape mode.

Setting width=device-width on the other hand will not scale anything up, but change the viewport width, for which you then can craft an optimized layout using media queries. Or that is at least the theory: the iPad somehow interprets width=device-width as 768px even in landscape mode. In order to get the real device width, you have to add initial-scale=1.

Hence, I disagree with James' suggestion. Just go for:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

and deal with size differences using liquid / responsive layout techniques.

Related questions

iPad layout scales up when rotating from portrait to landscape

I have a added to the "viewport" meta tag "width=device-width,initial-scale=1.0" and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales …

Read More
Difference between visual viewport and layout viewport?

What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad? I have gone through a lot of online resources, but am still unclear about it.

Read More
Autoplay audio files on an iPad with HTML5

I'm trying to get an audio file to autoplay in Safari on an iPad. If I go to the page using Safari on my Mac, it's fine. On the iPad, autoplay does not work.

Read More