使用 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

问题

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。

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

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

Reset Viewport Zoom on iOS10 with Javascript

javascript

viewport

ios10

问题

解决方案