我可以即时更改移动浏览器中的视口元标记吗？

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就会尊重新设置。

更新：

如果您的源代码中还没有meta视口标记，则可以直接将其附加如下内容：

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

在你的<head>

<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步

视口标签会更新，但是捏缩放仍处于活动状态！ 我必须找到一种方法来获取页面以进行更改...

这是一个hack解决方案，但是切换身体的不透明度可以解决问题。 我敢肯定还有其他方法可以做到这一点，但这对我有用。

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

第三步

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

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

希望对您有所帮助。 在找到解决方案之前，我花了数小时来敲打鼠标。