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

我有一个为移动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;" />

---

我意识到这有点过时，但是，是的，这是可以做到的。一些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 viewport标记，则可以直接使用以下内容将其附加：

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

$（'head'）。追加（''）；
在您的

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

这在很大程度上已经得到了回答，但我将扩展

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

我的问题在这一点上基本上解决了，但还没有完全解决。我需要知道页面的当前缩放级别，以便调整某些元素的大小以适应页面（想想地图标记）

我希望这对某人有帮助。我花了几个小时敲打鼠标才找到解决办法。
太好了！不幸的是，我似乎无法让它发挥作用。我的情况有点不同：我正在使用一个宽度为980px的站点。内容一直延伸到设计的边缘，因此在iPad上，它看起来很尴尬。我想我应该将视口的宽度设置为1020px，以允许两边都有20px的边距。。。但是运气不好：
viewport=document.querySelector（“meta[name=viewport]”）；setAttribute（'content'，'width=1020'）（仅用于某些上下文：我将它放在一个有点锁定的Drupal实例中…因此我没有直接访问头部区域的权限，需要使用Javascript）这应该足够简单。直接写下来就行了。如果您使用的是jQuery，它会是这样的：
$（'head'）.append（''）或，不带jQuery:
文档。getElementsByTagName（'head'）[0]。appendChild（…）对于内容属性，mobile safari的web检查器在分号上抛出一个错误。这似乎更有效：
viewport.setAttribute（'content'，'width=devicewidth，initial scale=1.0，maximum scale=1.0，user scalable=0'）@没错，appendChild需要的是节点，而不是字符串。更新。谢谢。@basZero：在运行上述代码之前，您可以使用用户代理检查脚本运行在哪个设备上，但总的来说，我认为这是个坏主意。尝试根据设备特性（或屏幕大小，如果必须的话）而不是实际设备来概括。例如，您可以检测设备是否支持触摸事件等（即使用）。取决于你想做什么。这救了我的命，但我有一个小问题：假设你以100%的速度在叠加div中显示图片并在移动设备上放大，你将使用本机浏览器缩放实现进行缩放，它通常只缩放可见区域，而不重新渲染原始文件。另一方面，如果我删除禁用缩放状态的“宽度=设备宽度”，则在缩放时会使图片呈现良好，但当100%div关闭时，我会失去最后一页的位置。。。
// 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');

// 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;