gpt4 book ai didi

javascript - 动态设置元视口(viewport)比例

转载 作者:行者123 更新时间:2023-11-30 09:17:51 32 4
gpt4 key购买 nike

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

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

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

编辑:

我已经成功切换了

的元视口(viewport)标签
<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

设置属性: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不工作

最佳答案

您要更改的元标记是视口(viewport)。当 metateg 设置为 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>

关于javascript - 动态设置元视口(viewport)比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53823034/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com