innerWidth 在移动设备上没有得到正确的宽度

Question

我在下面有一个代码，它试图通过他们设备的 innerWidth 来确定某人是从移动设备还是桌面访问我的网站。但是，当我尝试从我的手机获取 innerWidth 时，它显示我的手机的宽度是 980px？不过，我的手机的宽度不可能接近那么宽。我的手机宽度约为：300px，高度约为 500px。在我的桌面上，它显示 1280 像素，这是正确的。我的问题是，为什么我的手机显示错误的宽度？除非有什么我理解不正确？

<?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>

Answer 1

window.innerWidth 代表大多数移动设备上的视口像素，而不是物理像素。您应该能够通过巧妙地使用 doctype 声明（例如......实际上声明一个 doctype）以及在 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 在缩放时也会从实际像素跳转到视口像素。