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)+'') ;

我希望這對未來的讀者有所幫助。