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

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

看起来像是重写元视口的老方法：

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+上，放大非常远，如下所示：

在缩放超过设备宽度时更改视口不会在更改视口元标记时缩小。这在android上确实有效（至少在chrome浏览器中是如此）。

问题

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”]”）；
setAttribute（“内容”，“初始比例=1.0，最小比例=1.0，最大比例=1.0”）；
console.log（document.querySelector（'meta[name=“viewport”]”）
如果要转到页面首次加载时的默认缩放级别，请使用下面的代码段

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

这将设置默认的缩放，并允许用户根据需要再次放大。
我在我的iphone6/ios10中检查了这一点
此外，我发现设置元视口内容的值，它只会产生一次效果。如果尝试多次缩小，可能需要应用随机值

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

此页面是否已包含名称视口的元标记？@Mattcoady检查答案，如果有，请告诉我problem@SagarV不，那没用。我已经在这里设置了一个测试页面（包含您的代码片段）：按住“放大”按钮，然后单击按钮。视口不会缩小到设备宽度。我在上面的编辑中添加了更多详细信息。@MattCoady您确定要允许用户放大吗？以上答案都不适用于我的情况（处理通过聚焦输入字段触发的iOS缩放）。我的突破来自于发现。解决方案#3简单且适合我的需要：通过添加
字体大小：16px到标签
正文
和我的输入字段，我首先阻止了iOS自动缩放。这不是我想要的。我在这里构建了一个测试页面：在iOS 10上打开它（我使用的是10.2）并将其放大（示例：）。在缩小设备宽度后触发视口更改不会起任何作用。我需要它返回到设备宽度。@MattCoady当触发视口更改时，您希望返回到默认的缩放级别。与我们首先加载页面相同。对吧？所以我发现了问题。看起来xcode iOS设备模拟器和真实设备处理视口的方式不同。看起来您的代码一直在真实设备上运行。：/感觉有点像苹果的疏忽。谢谢你的帮助！注：您还可以根据需要将最小刻度=值从0调整为1。如最小刻度=0.30。将其设置在适合您在设备上缩放需要的位置。我发现了问题。看起来xcode iOS设备模拟器和真实设备处理视口的方式不同。此代码在真实设备上工作。我把赏金颁给了萨加尔，因为他们首先给出了一个有效的答案。谢谢你的帮助，太好了。你修好了。这就是我们想要的。