CODEWITHSUNDEEP
iosipadviewportmeta-tags
Ben Racicot
Ben Racicot

Reputation: 5951

iOS 9 Safari Viewport bug

I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag.

When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2:

enter image description here

The Problem: When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image. Landscape is fine and all other devices / OS' are working as expected.

The website is Utilidata.com. Has anyone seen this behavior or know of a fix?

<meta name="viewport" content="width=device-height, initial-scale=1, user-scalable=no"/>

UPDATE: I'm seeing reddit people freaking out about iOS 9's viewport issues. However their shrink-to-fit=no solution doesn't fix.

Upvotes: 2

Views: 3374

Answers (1)

Adesh M
Adesh M

Reputation: 444

Make sure to incorporate below changes to meta > viewport:

  • Remove width=device-width and height=device-height
  • Also set *-scale to 1.0001 from 1.0.

-

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

Worked well for me! Good Luck!!!

Upvotes: 0

Related Questions