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 回答