JavaScript 设置 <meta name="viewport"

Question

是否可以在

之前有一个 JavaScript 函数

<meta name="viewport" content="width=device-width; initial-scale=1.0; ">

设置比例数字，正确定位每个移动设备的宽度？ 例如在 JavaScript 中我们有

if (window.devicePixelRatio == 0.75)

我们制作元标签：

<meta name="viewport" content="width=device-width; initial-scale=1.4; ">

和

 if (window.devicePixelRatio == 1.5)

我们制作元标签：

<meta name="viewport" content="width=device-width; initial-scale= 0,75; ">

因此页面加载时会放大或缩小，以完美适应设备宽度。

如果可以的话，请您发布一个示例。

Answer 1

好吧，经过长时间的研究，我找到了解决这个问题的方法。 我没有找到通过 JavaScript 控制比例的方法，但我找到了另一种实用的方法。我希望它对其他编码员有用。

假设您的页面宽度为 250px，并且您想要为 Android 制作一个 webview 应用程序。而且您的页面没有响应，因此您的宽度是固定的。你也尝试过

< meta name="viewport" content="width=250">

但它不适合你。

将 .css 添加到您的页面，并根据需要调整数字。

@media screen and (max-width: 320px) { 
html { zoom: 120%; } 
}

@media screen and (max-width: 400px) { 
html { zoom: 150%; } 
}

@media screen and (max-width: 800px) { 
html { zoom: 220%; } 
}

@media screen and (min-width: 801px) { 
html { zoom: 230%; } 
}

因此页面及其元素可以很好地缩放以适合打开 webview 应用程序的 Android 设备。 我通过android得到的大多数宽度是240 320 400 480 533 600 800 或者您可以计算出每个 50 或 100 的缩放值 250 300 350 400 .. 等等

Answer 2

以下 jQuery 函数为我完成了：

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+(1/window.devicePixelRatio)+'');

Answer 3

如果该元素不存在，您可以使用普通 JavaScript 创建它

var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, initial-scale=1');
document.head.appendChild(meta);