使用Javascript启用/禁用iPhone Safari的缩放功能？ [英] Enable/disable zoom on iPhone safari with Javascript?

问题描述

我有1页有2个DIV元素，根据用户点击动作按钮显示/隐藏javascript，我想在操作按钮点击时切换缩放。

I have 1 page which has 2 DIV elements which is shown/hidden based on user click on action buttons with javascript, I would like to toggle scaling on action button click.

我尝试使用下面的javascript，它正在更改viewport meta但没有效果。

I tried with below javascript and it is changing viewport meta but getting no effect.

有任何建议吗？

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);
            }
        }

推荐答案

删除并重新添加为我工作的元标记：

Removing and re-adding the meta tag worked for me:

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" />');              
  }
}

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

However, if the user zooms in and then switches to no zoom, the viewport remains zoomed and the user can no longer change the zoom. Does anyone have a solution for that?

这篇关于使用Javascript启用/禁用iPhone Safari的缩放功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！