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的左侧部分（100px）位于屏幕的最右侧。

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

实际上有两种行为：

错误：如果您只是运行Safari并点击button-X，它将开始以1200px而不是640px显示您的网站....已移位body将使整个{ {1}}有630px的空格+体宽= ~1200px。即使viewport具有body或position: absolute;，理论上它应该允许在视口外定位元素，但事实并非如此。 iOS使视口如此之大，以至于屏幕上的元素应该出现在屏幕上。
正确：我不会问这个问题，因为可能它是如何工作的，它无法改变但是有修复，所以我认为它是iOS的错误。如果我运行Safari，我用两根手指点击它并将它们移动到一起（比如缩小），然后点击position: fixed;它完美无缺。这种用两根手指敲击的动作不会改变任何视口。由于视口被设置为640px，因此在释放手指后它将保持640px，因此文学没有任何变化......但是在这个简单的动作之后它开始完美地工作。

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

button-X
jQuery(window).trigger('resize');
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
有趣的是：即使你设置-webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;

这没有改变任何事情。基本上我希望绝对定位的元素（或user-scalable: no）与桌面浏览器一样不在视口中。

Answer 1

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

无论如何 - 通常，视口是body。让body比视口更宽并期望body剪辑自己是奇怪的。尝试将body设置为固定的width（不是最小值，因为这样可以获得所需的宽度），并将div容器放在body内，并将margin CSS更改应用于div，而不是body - body应设置width和overflow-x:hidden。

如何修复iOS Viewport Bug？

1 个答案: