JavaScript 设置初始比例<meta name="viewport" < div><div id="text_translate"><p>是否有可能在之前有一个 JavaScript function</p><pre> &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; "&gt;</pre><p> 设置比例数字，以正确定位每个移动设备的宽度？ 例如在 JavaScript 我们有<br></p><p>if (window.devicePixelRatio == 0.75)<br></p><p> 我们制作元标记：</p><pre> &lt;meta name="viewport" content="width=device-width; initial-scale=1.4; "&gt;</pre><p> 和<br></p><pre> if (window.devicePixelRatio == 1.5)</pre><p> 我们制作元标记：<br></p><pre> &lt;meta name="viewport" content="width=device-width; initial-scale= 0,75; "&gt;</pre><p> 因此页面在加载时会放大或缩小，以完全适合设备宽度。</p><p> 如果可能的话，请您发布一个示例。</p></div>

Question

是否有可能在之前有一个 JavaScript function

<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看到的大多数宽度是240320400480480533600800，或者您可以计算出每50或100的缩放值250300350400 ..依此类推

Answer 2

以下 jQuery function 为我做了：

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

我希望这对未来的读者有所帮助。