innerWidth在手機上沒有得到正確的寬度

我有一個下面的代碼，試圖確定是否有人通過手機或桌面，通過其設備的innerWidth訪問我的網站。但是，當我嘗試從手機中獲取innerWidth時，它顯示我的手機的寬度是980像素？雖然我的手機的寬度沒有任何寬度，我的手機的寬度爲300px左右，高度爲500px左右。在我的桌面上，它顯示1280px，這是正確的。我的問題是，爲什麼它顯示我的手機寬度錯誤？除非有什麼我不正確的理解？innerWidth在手機上沒有得到正確的寬度

<?php 
include("ajaxLink.php"); 
?> 

<script> 

$(function(){ 

var width = window.innerWidth; 

alert(width); 

if (width > 500) { 
alert("going to index"); 
window.location = "/"; 
} //end of if (width > 500) 
else { 
alert("going to mobile"); 
window.location = "mobile.php"; 
} //end of else (width <= 500) 

}); 

</script>

來源

2016-03-06 frosty

__around：300px__？通過你的設備的規格。在鉻'設備模式下測試這個代碼' – Rayon

@RayonDabre我們在談論寬度，從左到右，從上到下的高度，對吧？ – frosty

window.innerWidth表示視在大多數移動設備的像素和不物理像素。您應該能夠通過巧妙使用文檔類型聲明（例如..實際聲明文檔類型）以及在head部分中包含meta viewport標籤來解決此問題。下面是從this article報價是深入討論了有關您的具體問題：當視未被約束

但是，和HTML5文檔類型（或沒有）時，innerWidth會突然開始表現值多少大於物理屏幕：並且表示頁面已被渲染的視口畫布的寬度。

例如，在肖像iPhone上，默認視口是980像素。在風景iPhone上，根據window.innerWidth，981（是的，真的）。

我想試試這個：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
    </head>

據quirksmode，window.outerWidth也被實際像素放大時視口像素跳躍。

來源

2016-03-06 02:53:42

innerWidth在手機上沒有得到正確的寬度

回答

相關問題