3

想象一下以下设置：

<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 像素。即使bodyhas position: absolute;or position: fixed;which 理论上应该允许将元素定位在视口之外，但事实并非如此。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. 如何在 iPhone 上更改方向时重置 Web 应用程序的比例/缩放？
  4. 有趣：即使你设置它也会使视口〜1200pxuser-scalable: no

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

4

1 回答 1

1

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

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

于 2013-01-03T18:21:02.767 回答