重置视口使用Javascript在iOS10上缩放

Question

我有一个页面，我需要重置视口缩放（缩放缩放）命令，将其设置回初始缩小状态。

看起来像重写元视口的旧尝试和真实的方法：

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浏览器中）。

Answer 1

问题

1. attr()不是JavaScript函数。这是一个jQuery方法。
2. 您正在使用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" />

如果content出现在页面中，它将设置meta[name=viewport]。

如果页面中没有<meta name="viewport".../>，请创建一个，使用setAttribute设置name=viewport并将其追加到头部。

工作片段

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

Answer 2

如果你想进入默认的缩放级别，就像页面加载时一样，首先使用下面的代码片段。

const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "width=device-width, initial-scale=0");

这将设置默认缩放，让用户可以根据需要再次放大。我在iPhone 6 / iOS 10中查看了这个

Answer 3

另外，我发现设置元视口内容的值，它只有一次效果。如果您尝试多次缩小，则可能需要应用随机值。

    function pinchOut() {
        appliedScale = 1 - Math.random()*0.01;
        document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width, initial-scale=" + appliedScale);
    }