如何修复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的左侧部分(100px)。

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

实际上有两种行为：

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

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

1. jQuery(window).trigger('resize');
2. -webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
3. 如何在 iPhone 上的方向更改上重置网络应用程序的比例/缩放比例？
4. 有趣：即使您设置了视口，它也会使视口~1200pxuser-scalable: no

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

Answer 1

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

无论如何 - 一般来说，视口是body.使body比视口更宽并期望body自行剪辑是很奇怪的。尝试将body设置为固定width(不是最小值，因为这样它可以根据需要变宽)，并将div容器放在body内，并将marginCSS 更改应用于div，而不是body-body应该设置width并overflow-x:hidden。