使用Javascript在iOS10上重置视口缩放
使用Javascript在iOS10上重置视口缩放
提问于 2017-06-17 09:00:17
我有一个页面，我需要在命令上重置视口比例(收缩缩放)，将其设置回初始缩小状态。
看起来像是重写元视口中久经考验的真实方法：
const viewportmeta = document.querySelector('meta[name="viewport"]');
viewport.attr('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");似乎对ios10不再有任何影响(页面仍处于放大状态)。有什么办法可以解决这个问题吗？
更新
.attr是一种jquery方法，我错误地把它留在了原始问题中(应该是setAttribute，我尝试了很多不同的方法来实现它)。不过，这个问题仍然存在。我已经构建了一个演示页面here。
在iOS 10+上放大很远，如下所示：
当更改视区元标签时，当您放大设备宽度时，更改视区并不会缩小。这在android上是有效的(至少在chrome浏览器中是这样)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-06-23 15:43:37
问题
attr()不是JavaScript函数。这是一个jQuery方法。- 您正在使用
viewportmeta获取meta标记，然后尝试将属性设置为未声明的viewport变量。
解决方案
由于您使用的是JavaScript，因此请改用setAttribute方法。
语法：
const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");代码段
let viewportmeta = document.querySelector('meta[name="viewport"]');
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));<meta name="viewport" />
如果meta[name=viewport]出现在页面中，它会将content设置为on。
如果页面中没有<meta name="viewport".../>，请创建一个，使用setAttribute设置name=viewport并将其附加到head。
工作代码段
let viewportmeta = document.querySelector('meta[name="viewport"]');
if(viewportmeta===null){
viewportmeta = document.createElement("meta");
viewportmeta.setAttribute("name","viewport");
document.head.appendChild(viewportmeta);
viewportmeta = document.querySelector('meta[name="viewport"]');
}
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));
Stack Overflow用户
发布于 2019-04-10 04:26:01
另外，我发现设置meta viewport内容的值，只有一次才有任何效果。如果尝试多次缩小，则可能需要应用随机值。
function pinchOut() {
appliedScale = 1 - Math.random()*0.01;
document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width, initial-scale=" + appliedScale);
}Stack Overflow用户
发布于 2017-06-29 22:01:19
如果您想转到页面加载时的默认缩放级别，请首先使用下面的代码片段。
const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "width=device-width, initial-scale=0");这将设置默认缩放，并允许您的用户根据需要再次放大。我在我的iPhone 6/iOS10中检查了这个
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44599800
复制相关文章
相似问题