我有一个为移动 Safari 浏览器构建的 AJAX 应用程序，它需要显示不同类型的内容。
对于某些内容，我需要，user-scalable=1而对于其他内容，我需要user-scalable=0.
有没有办法在不刷新页面的情况下修改内容属性的值？
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
我可以在移动 Safari 中动态更改视口元标记吗？
IT技术
javascript
mobile-safari
viewport
2021-02-09 08:45:57
3个回答
我意识到这有点旧，但是，是可以做到的。一些 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">');
在你的 <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;");
...但是祝你好运为你的设备调整它，摆弄几个小时......我仍然不在那里！
这已经在很大程度上得到了回答，但我会扩展......
步骤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 解决方案，但是切换 body 的不透明度可以解决问题。我确信还有其他方法可以实现这一点，但这是对我有用的方法。
// 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;
我希望这对某人有帮助。在找到解决方案之前，我花了几个小时敲打鼠标。