Viewport meta tag for iOS devices

Question

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 1

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.