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>

__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也被实际像素放大时视口像素跳跃。

innerWidth在手机上没有得到正确的宽度

相关推荐