重置视口使用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我尝试了一堆不同的东西来使这个工作）。 问题仍然存在。 我在这里建了一个演示页面。

在iOS 10+放大到目前为止，像这样：

当缩放超过设备宽度时更改视口不会在更改视口元标记时缩小。 这确实 （在Chrome浏览器至少）在Android上工作。

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" /> 

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

如果页面中没有<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);
    }