动态设置元视口比例

Question

https://stackblitz.com/edit/js-meta-viewport

在 Chrome 调试器中，当我点击“可以缩放”时，我可以看到元标记正在更新，但无法在移动设备（Nexus 5 (Chrome 70)）上进行缩放。

最终目标是在移动设备上动态允许和禁止在同一个 spa 中缩放。

编辑：

我已经成功地从

切换元视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, minimum-scale=0.0, user-scalable=yes">

到

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

还有不包括最小尺度的变体

然后返回，但这似乎没有影响或改变行为，特别是用户在我的 Nexus 5 (Chrome 70) 上“缩放”的能力。

我尝试分配viewportTag.content = content，调用viewportTag.setAttribute('content', content)，然后重新渲染document.head.removeChild()，然后再渲染document.head.appendChild()。再次全部成功切换标记但没有任何行为

分配：https://stackblitz.com/edit/js-meta-viewport

setAttribute：https://stackblitz.com/edit/js-meta-viewport-answer (https://stackoverflow.com/a/53899867/6656422)

重绘：https://stackblitz.com/edit/js-meta-viewport-redraw

更新：

这里的解决方案有效 https://stackblitz.com/edit/js-meta-viewport-answer (https://stackoverflow.com/a/53899867/6656422) 但我不明白为什么，它不是 setAttribute() 因为 https://stackblitz.com/edit/js-meta-viewport-setattribute 不起作用

Answer 1

您要更改的元标记是视口。 当 metaeg 设置为 user-scalable=no 时，用户无法像这样缩放设备：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

要使用 javascript 更改它，请查看以下代码：

// Holds the scale state. doesn't have to be in a global var,
// just for the clarity of the explanation
let allowScale = true;

// Just to show the state
// You do not need this function
function showViewportState() {
    const viewportState =  document.getElementById('viewport-state');
    viewportState.innerHTML = allowScale? 'Can Scale': 'Can not Scale';
}
showViewportState();

const btn = document.getElementById('toggle');
btn.addEventListener('click', toggleViewport);

// The toggle view port updates the
function toggleViewport(){
    let viewport = document.querySelector("meta[name=viewport]");
    if (!viewport){
        // in case there is no view port meta tag creates one and add it to the head
        viewport=document.createElement('meta');
        viewport.name = "viewport";
        document.getElementsByTagName('head')[0].appendChild(viewport);
    }
    
    const content = allowScale?
        'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no':'width=device-width, initial-scale=1.0, user-scalable=yes';
    // this is where the magic happens by changing the vewport meta tag
    viewport.setAttribute('content', content);
    allowScale = !allowScale;
    showViewportState();
}

        body{
            margin: 0;
            padding: 0;
        }
        .main{
            display: flex;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        #viewport-state{
            margin-top: 20px;
            font-weight: bold;
            display: block;
        }

<!-- Just an example -->
<div class="main">
    <div class="wrapper">
        Try to toggle on mobile, and then zoom in<br>
        <button id="toggle">Toggle Scale</button>
        <div id="viewport-state"></div>
    </div>
</div>

Answer 2

maximum-scale。从缩放变态。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

此外，如果它不起作用，请在样式表 css 中添加以下内容：

@-ms-viewport{ width: device-width; }

因此，请阅读本文以了解如何处理它并进一步了解它：

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 3

您需要使元标记从手机而不是计算机获取宽度。请试试这个：<meta name="viewport" content="width=device-width, initial-scale=1"> 更多参考请看这里：CSS-Tricks: Responsive Meta Tag