我对 iPad 的缩放有疑问。
单击时,用户应该得到一个带有叠加层的弹出窗口,并且视图不应该被缩放——这意味着它应该缩小到 0.75(基本上尽可能地缩小)。因此,我将此 jQuery 代码应用于视口:
$('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');
关闭时,我也将其重置为原始值以启用缩放。像这样:
$('meta[name="viewport"]').attr('content', 'width=1020');
所以重申:
- 用户访问页面,初始视口内容为width=1020
- 用户单击触发弹出窗口的元素,用户可以在页面上捏放大
- 弹出事件更改视口内容,使其缩小到 0.75 [代码块 #1]
- 当弹出窗口关闭时,视口内容被重置[代码块 #2]
这工作正常,直到用户在第一次视口更改后执行一个捏缩放操作,并再次触发弹出事件。然后应用的视口属性将不会生效,它将保持放大而不是比例 0.75。
TLDR:视口缩小只适用一次 :)
附加更多代码:
$('body').on('click', '#large-image', function() {
$('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');
// HERE GOES CODE THAT CREATES A FIXED DIV WITH 100% IN BOTH HEIGHT AND WIDTH
});
$('body').on('click', '#zoomPinchClose', function() {
// REMOVE THE FIXED DIV
$('meta[name="viewport"]').attr('content', 'width=1020');
});
基本上就是这样。没有造型的身体。只创建了一个拉伸的固定 div。