iOS 9 Safari Viewport错误

问题描述

我正在研究一个网络项目的iPad版本，并使用Safari的网络检查器来处理CSS布局等。但是我已经将我的错误跟踪到了视口元标记。

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.

当带有iOS 9.0 - 9.2的iPad Air处于纵向模式时，视口元规则会被破坏/忽略。以下是来自iPad air iOS 9.2的问题的屏幕截图：

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:

问题：
以纵向显示 html 和正文的计算宽度标签是768px，但右边有一个大约300px的空白区域。另外 user-scalable = no 不适用。导航和页脚等固定项目在图像中显示为100％。
景观很好，所有其他设备/操作系统都按预期工作。

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.

该网站是Utilidata.com。有没有人看到这种行为或知道修复？

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"/>

更新：我看到人们对iOS 9的视口问题感到不满。但是，他们的 shrink-to-fit = 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.

推荐答案

确保将以下更改纳入 meta > viewport ：

Make sure to incorporate below changes to meta > viewport:

• 删除 width = device-width 和 height =设备高度


• 同时将
  * -scale设置为 1.0001 来自 1.0 。

• 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!!!

这篇关于iOS 9 Safari Viewport错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！