innerWidth 在移动设备上没有得到正确的宽度
Posted
技术标签:
【中文标题】innerWidth 在移动设备上没有得到正确的宽度【英文标题】：innerWidth not getting the correct width on mobile 【发布时间】：2016-03-06 02:46:01 【问题描述】：我在下面有一个代码，它试图通过他们设备的 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>
【问题讨论】：
大约：300px ?查看您设备的规格。在 chrome 中测试此代码device mode
@RayonDabre 我们说的是宽度，从左到右，高度是从上到下，对吧？
【参考方案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 在缩放时也会从实际像素跳转到视口像素。
【讨论】：
以上是关于innerWidth 在移动设备上没有得到正确的宽度的主要内容，如果未能解决你的问题，请参考以下文章
浏览器可视区大小简说（clientWidth,innerWidth）