使用 Javascript 启用/禁用 iPhone Safari 的缩放？

Posted 2023-03-05

【中文标题】使用 Javascript 启用/禁用 iPhone Safari 的缩放？

【英文标题】：Enable/disable zoom on iPhone safari with Javascript?

【发布时间】：2011-02-14 13:19:11

【问题描述】：

我有 1 个页面，其中包含 2 个 DIV 元素，这些元素根据用户使用 javascript 对操作按钮的点击显示/隐藏，我想在点击操作按钮时切换缩放。

我尝试使用下面的 javascript，它正在更改视口元数据，但没有任何效果。

有什么建议吗？

var ViewPortAllowZoom = 'width=device-width;';

var ViewPortNoZoom = 'width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;';

  function AllowZoom(flag) 
            if (flag == true) 
                $('meta[name*=viewport]').attr('content', ViewPortAllowZoom);                
            
            else 
                $('meta[name*=viewport]').attr('content', ViewPortNoZoom);
            
        

【参考方案1】：

这些是禁用缩放的步骤：

说服您的 PM 禁用是一个坏主意（请参阅下面的文章）。 如果他还想要，就更努力地说服他。 如果他仍然想要它，请阅读这篇文章并将 preventDefault 添加到gesturestart，如评论中所述： https://wouterdeschuyter.be/blog/how-to-disable-viewport-scaling-in-ios-10-you-dont-941140811

它适用于 iPhone 6 并且不会阻止滚动。

感谢链接，Aloober：https://***.com/a/41166167/1409261

【参考方案2】：

$('body').bind('touchmove', function(event)  event.preventDefault() ); // turns off

$('body').unbind('touchmove'); // turns on

【讨论】：

那不是也禁用滚动吗？

这会禁用所有需要在触摸时移动的手势...

【参考方案3】：

删除和重新添加元标记对我有用：

function AllowZoom(flag) 
  if (flag == true) 
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1, user-scalable=1" />');
   else 
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />');              
  

但是，如果用户放大然后切换到不缩放，则视口将保持缩放状态，并且用户无法再更改缩放。有人对此有解决方案吗？

【讨论】：

content="width=960" 强制它在纵向视图中保持“缩小”状态。

它在 android 4.2 原生浏览器上不起作用，如果您删除缩放，则无法通过恢复元标记属性来重新启用它，就像在此功能中所做的那样。