Javascript 我可以在移动 Safari 中动态更改视口元标记吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3588628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the viewport meta tag in mobile safari on the fly?
提问by Pepper
I have an AJAX app built for mobile Safari browser that needs to display different types of content.
我有一个为移动 Safari 浏览器构建的 AJAX 应用程序，它需要显示不同类型的内容。
For some content, I need user-scalable=1and for other ones, I need user-scalable=0.
对于某些内容，我需要，user-scalable=1而对于其他内容，我需要user-scalable=0.
Is there a way to modify the value of the content attribute without refreshing the page?
有没有办法在不刷新页面的情况下修改内容属性的值？
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
回答by markquezada
I realize this is a little old, but, yes it can be done. Some javascript to get you started:
我意识到这有点旧，但是，是可以做到的。一些 javascript 让你开始：
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
Just change the parts you need and Mobile Safari will respect the new settings.
只需更改您需要的部分，Mobile Safari 就会尊重新设置。
Update:
更新：
If you don't already have the meta viewport tag in the source, you can append it directly with something like this:
如果源代码中还没有元视口标记，则可以直接添加如下内容：
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);
Or if you're using jQuery:
或者，如果您使用的是 jQuery：
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
回答by sonjz
in your <head>
在你的 <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
somewhere in your javascript
在你的 javascript 中的某个地方
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... but good luck with tweaking it for your device, fiddling for hours... and i'm still not there!
...但是祝你好运为你的设备调整它，摆弄几个小时......我仍然不在那里！
回答by posit labs
This has been answered for the most part, but I will expand...
这已经在很大程度上得到了回答，但我会扩展......
Step 1
第1步
My goal was to enable zoom at certain times, and disable it at others.
我的目标是在某些时候启用缩放，而在其他时候禁用它。
// 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');
Step 2
第2步
The viewport tag would update, but pinch zoom was still active!! I had to find a way to get the page to pick up the changes...
视口标签会更新，但双指缩放仍然有效！！我必须找到一种方法让页面接收更改...
It's a hack solution, but toggling the opacity of body did the trick. I'm sure there are other ways to accomplish this, but here's what worked for me.
这是一个 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);
Step 3
第 3 步
My problem was mostly solved at this point, but not quite. I needed to know the current zoom level of the page so I could resize some elements to fit on the page (think of map markers).
我的问题在这一点上基本解决了，但还没有完全解决。我需要知道页面的当前缩放级别，以便我可以调整一些元素的大小以适应页面（想想地图标记）。
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
I hope this helps somebody. I spent several hours banging my mouse before finding a solution.
我希望这对某人有帮助。在找到解决方案之前，我花了几个小时敲打鼠标。
