19

Does stating

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

have the same effect as stating

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

for the ipad?

1 Answer 1

39

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.

4
  • Thanks for the reply Andreas, I was under the impression that device-width returned the width of the ipad device (768px) whether it was in portrait or landscape
    – pingu
    Oct 26, 2011 at 14:44
  • 1
    Late reply. You are correct. <meta name="viewport" content="width=device-width, initial-scale=1"> is needed in ordre to get the real device width on the iPad. Jun 29, 2012 at 18:00
  • 1
    This doesn't work for me, for some reason in landscape orientation, the width is set to some value greater than the landscape width of the device, for no good reason.
    – Mr. TA
    Jun 19, 2013 at 18:02
  • 1
    UPDATE: fixed by also setting maximum-scale=1
    – Mr. TA
    Jun 19, 2013 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.