我可以动态更改 mobile safari 中的视口元标记吗？

Question

我有一个为移动 Safari 浏览器构建的 AJAX 应用程序，需要显示不同类型的内容。

对于某些内容，我需要 user-scalable=1，对于其他内容，我需要 user-scalable=0。

有没有办法在不刷新页面的情况下修改content属性的值？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 1

我意识到这有点老了，但是，是的，这是可以做到的。一些帮助您入门的 JavaScript：

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

只需更改您需要的部分，Mobile Safari 就会遵循新的设置。

更新：

如果您在源代码中还没有元视口标签，您可以直接添加如下内容：

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

或者如果您使用的是 jQuery：

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

Answer 2

在你的 的

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

某个地方在你的 javascript 中

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

......但是祝你好运，为你的设备调整它，摆弄几个小时......但我仍然不在那里！

来源

Answer 3

这个问题大部分已经得到解答，但我将扩展...

第 1 步

我的目标是在某些时间启用缩放，并在其他时间禁用它。

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

第 2 步

视口标签将更新，但捏缩放仍然处于活动状态！我必须找到一种方法让页面接受更改...

这是一个黑客解决方案，但是切换主体的不透明度就可以解决问题。我确信还有其他方法可以实现这一目标，但这对我有用。

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

第 3 步

此时我的问题已基本解决，但还没有完全解决。我需要知道页面的当前缩放级别，以便我可以调整某些元素的大小以适合页面（想想地图标记）。

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

我希望这对某人有帮助。我花了几个小时敲击鼠标才找到解决方案。

Answer 4

试试这个

<script type="text/javascript">
    var scale=(screen.width/1080);
    document.write('<meta name="viewport" content="width=device-width, initial-scale='+scale+'">');
</script>