如何修复 iOS 视口错误？

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; 
}

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

它将整个身体几乎 100% 向右移动。不出现水平滚动条。您只能看到位于屏幕最右侧的body 的左侧（100 像素）。

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

实际上有两种行为：

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

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

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

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

Answer 1

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

无论如何 - 通常，视口是 body。使body 比视口更宽并期望body 自行剪辑是很奇怪的。尝试将body 设置为固定的width（不是最小值，因为这样它可以随心所欲地变宽），并在body 中放置一个div 容器，并应用您的margin CSS更改为div，而不是body - body 应该设置width 和overflow-x:hidden。