ios - 如何修复 iOS 视口(viewport)错误？

Question

想象一下以下设置:

<meta name="viewport" content="user-scalable=yes, width=640" />

默认 CSS:

body { width: 100%; }

某些元素的 CSS 更改(我们称之为 button-X)点击:

body { 
    margin: 0 0 0 -webkit-calc(100% - 100px);
    min-width: 640px; 
    overflow-x: hidden; 
}

这在桌面浏览器中有什么作用？

它使整个 body 几乎 100% 向右移动。水平滚动条不出现。您只能看到位于屏幕最右侧的 body 的左侧部分 (100px)。

这在 iPhone 4S iOS 6.0.1 中有什么作用？

实际上有两种行为:

1. 不正确:如果您只是运行 Safari 并单击 button-X，它将开始以 1200px 而不是 640px 显示您的网站.... shifted body 将使整个 viewport 有 630px 的空白空间 + body width = ~1200px。即使 body 有 position: absolute; 或 position: fixed; 理论上应该允许将元素定位在视口(viewport)之外，但事实并非如此。 iOS 使视口(viewport)变得如此之大，以至于本应不在屏幕上的元素出现在屏幕上。
2. 正确:我不会问这个问题，因为也许这就是它的工作方式并且无法更改，但有修复程序，所以我认为这是 iOS 的错误。如果我运行 Safari 并用 2 根手指点击它并将它们移动到一起(比如缩小)然后单击 button-X 它会完美运行。这种用两根手指点击的 Action 不会改变视口(viewport)的任何内容。由于视口(viewport)设置为 640 像素，松开手指后它将保持 640 像素，因此文学上没有任何变化......但在这个简单的操作后它开始工作得很好。

问题是 - 如何以编程方式执行此操作 (2)？我试过:

1. jQuery(window).trigger('resize');
2. -webkit-transform-origin: 0px 0px; -webkit 变换:scale3d(1,1,1)；缩放:1;
3. How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
4. 有趣:即使您设置了 user-scalable: no
，它也会使视口(viewport)变为 ~1200px

这并没有改变任何东西。基本上我希望绝对定位的元素(或 overflow: hidden;)像在桌面浏览器中一样离开视口(viewport)。

Answer 1

您是否尝试过initial-scale=1, maximum-scale=1, user-scalable=no？另外，我认为您正在尝试向后修复它。你到底想做什么？不是视口(viewport)或 DOM 元素的行为，而是结果网站/网络应用程序。

无论如何 - 通常，视口(viewport)是 body。使 body 比视口(viewport)宽并期望 body self 剪辑是很奇怪的。尝试将 body 设置为固定的 width(不是最小宽度，因为这样它可以得到它想要的宽度)，并放置一个 div body 内的容器，并将您的 margin CSS 更改应用到 div，而不是 body - body 应该设置 width 和 overflow-x:hidden。