想象一下以下设置:
<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 中有什么作用?
实际上有两种行为:
- 错误:如果您只是运行 Safari 并单击
button-X
它,它将开始以 1200 像素而不是 640 像素显示您的网站。移位body
将使整个网站viewport
有 630 像素的空白空间 + 正文宽度 = ~1200 像素。即使body
hasposition: absolute;
orposition: fixed;
which 理论上应该允许将元素定位在视口之外,但事实并非如此。iOS 使视口变得如此之大,以至于您应该在屏幕外的元素都在屏幕上。 - 正确:我不会问这个问题,因为也许这就是它的工作方式并且无法更改但有修复,所以我认为这是 iOS 的错误。如果我运行 Safari 并用 2 根手指点击它并将它们一起移动(比如缩小),然后单击
button-X
它就可以完美运行。这个用两根手指敲击的动作不会改变任何视口。由于视口设置为 640 像素,因此在松开手指后它将保持 640 像素,因此文学没有任何变化……但在这个简单的动作之后它开始工作得非常好。
问题是 - 如何以编程方式执行此操作 (2)?我试过了:
jQuery(window).trigger('resize');
-webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
- 如何在 iPhone 上更改方向时重置 Web 应用程序的比例/缩放?
- 有趣:即使你设置它也会使视口〜1200px
user-scalable: no
这并没有改变什么。基本上我希望绝对定位的元素(或 with overflow: hidden;
)像在桌面浏览器中一样离开视口。