Question

在我的应用中，我为某些部分启用和禁用缩放

我用

启用缩放

$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=yes, width=device-width,    minimum-scale=1.0 , initial-scale=1.0, maximum-scale=5.0" />');

当我离开变焦部分时，我禁用变焦

$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" id="testViewport" content="user-scalable=no, width=device-width, minimum-scale=1.0 , initial-scale=1.0, maximum-scale=1.0" />');

问题是，如果我放大了，那么退出...页面一直处于可缩放状态

是否可以重置页面比例，然后使用jquery锁定缩放？

Answer 1

我有同样的问题，在网上找不到任何答案。我决定采用的解决方案是在用户点击可缩放区域后快速刷新页面。这有助于我唯一的可缩放内容在灯箱中，因此灯箱的关闭与页面的快速刷新相吻合，这将页面比例重置回我想要的位置。

所以，在灯箱关闭时，我开火了：`

location.reload（）;`

页面刷新后，用户被带回到他们在内容中浏览的位置，用户体验恢复了我试图实现的页面比例。我希望能给你一些想法。

Answer 2

我的解决方案是在比例变化之前记住比率，然后通过记忆比率使用视口缩放它。在iOS7上，按视口缩放始终不起作用。所以我使用location.reload（false）; （Jason怎么写的）

Answer 3

//prevent zoom
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');

//enable zoom
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );

//reset zoom use all together in function
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );

在iPad / iPhone上放大后重置比例

3 个答案: