Search code examples
ipadmobile-safaridevice-width

Why is the width of my safari viewport on my iPad only 768px instead of 1028px?

Everywhere I read, the width of the screen on the Ipad 1 is 1024 x 768.

I have built a site using bootstrap and the collapsable nav button appears when viewing the site in landscape mode on my iPad. It should not. It should only appear for viewports that are less than 1024px in width.

I then sniffed out the width as jQuery sees it using $(window).width(); and it is reporting only 768px x 467px;

I have the following metatag:

meta name="viewport" content="width=device-width"

Solution

  • In landscape mode the iPad zooms content in so that the effective viewport with is the same as in portrait mode.

    Try this - ISTR it's supposed to force all windows to 1:1 zoom, and prevents user zooming.

    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">