Question

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

<?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代表大多数移动设备上的 viewport 像素，而不是物理像素。您应该能够通过巧妙地使用doctype声明（例如..实际声明一个doctype）以及在meta viewport部分中包含head标记来解决这个问题。以下是this article的引用，详细介绍了您的具体问题：

但是当视口没有受到限制，并且使用HTML5 doctype（或者根本没有）时，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在移动设备上没有获得正确的宽度

1 个答案: