视口元标记删除错误答案

【问题标题】：Viewport meta tag remove bug视口元标记删除错误
【发布时间】：2013-05-24 14:58:25
【问题描述】：

我的网页绝对没有“元”视口标签。

我已经动态创建了自己的«meta»视口标签：

var viewportMeta = document.createElement('meta');
    viewportMeta.setAttribute('id', 'myMeta');
    viewportMeta.setAttribute('name', 'viewport');
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

并将其附加到«head»（在一些用户操作之后）：

document.head.appendChild(viewportMeta);

然后（在用户点击某个按钮后）我需要从«head»中删除“myMeta”«meta»标签：

var myMeta = document.getElementById('myMeta');
document.head.removeChild(myMeta);

它会 100% 移除！使用桌面浏览器和 iPad 上的 Adobe Edge Inspect Weinre 检查。

但是整个页面并没有回到之前的状态！整个页面保持不变，就像它在“viewportMeta”对象中具有所有已定义属性的«meta»视口标签。

那么，有没有办法完全删除 «meta» 视口标签？有什么想法吗？

（此问题出现在 iPad 的 Safari 和 Chrome 浏览器上。尝试不删除 «meta» 标记，只是更改了它的 «content» 属性 - 没有成功。未在 Android 设备和浏览器上检查。）

【问题讨论】：

标签： viewport meta

【解决方案1】：

你应该恢复视口元标记的原始值

<html>
<head>
    <title>test dynamic view port</title>
</head>
<body>
    <button id="turnOn">on</button>
    <button id="turnOff">off</button>

    <script type="text/javascript">

        function turnOnDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function turnOffDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=980, user-scalable=yes');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function removeMetaIfExist() {

            var metaElement = document.getElementById("myMeta");
            if (metaElement) document.head.removeChild(metaElement);
            alert("removed");
        }

        document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false);
        document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false);

    </script>
</body>

您可以在 Apple 的开发者网站上找到有关视口元默认值的详细信息： Safari HTML Reference: Supported Meta Tags

编辑：默认的 viewport 值“width=980, user-scalable=yes”对于所有设备和浏览器可能并不相同，因此对于完整的解决方案，您需要识别您的浏览器正在运行并相应地设置默认值

【讨论】：

我测试了你的建议——没有成功。它绝对不会从“width=device-width”更新为其默认宽度或小于容器宽度的任何宽度（例如，它调整为 1200 像素，但不会调整为 980 像素）。它将“user-scalable=no”更改为“user-scalable=yes”，这很完美。但是将“设备宽度”更新为任何默认宽度都没有成功。
我刚刚在带有 Android 4.0.4 的 Chrome 上对其进行了测试，并且可以正常工作。我稍后会针对 Apple 设备进行更新。
@ArielDeil 一旦我们删除视口元标记，那么我们可以添加它们吗？我的意思是我需要在按钮点击时添加和删除元标记。我也有 java 文件代码，如下所示 WebSettings settings = appView.getSettings(); settings.setBuiltInZoomControls(true); settings.setSupportZoom(true); settings.setDefaultZoom(ZoomDensity.MEDIUM);你能检查一下吗？？