重置视口使用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);
    }