在javascript中获取设备宽度
有没有办法获得用户设备的宽度，而不是视口的宽度，使用JavaScript？
正如我所能说的，CSS媒体查询提供了这个function
@media screen and (max-width:640px) { /* ... */ } 和
@media screen and (max-device-width:960px) { /* ... */ }
如果我以横向为目标定位智能手机，这很有用。 例如，在iOS上，即使在iPhone 4上， max-width:640px的声明也将同时针对横向和纵向模式。就我所知，Android不是这种情况，所以在此实例中使用device-width成功地针对这两个方向，而不针对桌面设备。
但是 ，如果我调用基于设备宽度的JavaScript绑定，我似乎仅限于testing视口宽度，这意味着一个额外的testing，如下所示，
if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }
这似乎并不优雅，给出了设备宽度可用于CSS的提示。
您可以通过screen.width属性获取设备的屏幕宽度。
有时在处理窗口大小通常小于设备屏幕大小的桌面浏览器时，使用window.innerWidth（通常不在移动设备上find）而不是屏幕宽度也很有用。
通常，在处理移动设备和桌面浏览器时，我使用以下内容：
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
Bryan Rieger的一个有用的答案是，在高密度显示器上，苹果设备报告screen.width下降，而Android设备则以物理像素报告。 （见http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 。）我build议使用if (window.matchMedia('(max-device-width: 960px)').matches) {}在支持matchMedia的浏览器上。
我只是有这个想法，所以也许是短视的，但它似乎运作良好，可能是你的CSS和JS之间最一致的。
在您的CSS中，您可以根据@media屏幕值设置html的最大宽度值：
@media screen and (max-width: 480px) and (orientation: portrait){ html { max-width: 480px; } ... more styles for max-width 480px screens go here }
然后，使用JS（可能通过像JQuery这样的框架），你只需要检查html标签的最大宽度值：
maxwidth = $('html').css('max-width');
现在您可以使用此值进行条件更改：
If (maxwidth == '480px') { do something }
如果在html标签上放置最大宽度的值看起来很可怕，那么也许你可以把不同的标签，一个只用于这个目的。 对于我的目的，HTML标签工作正常，不影响我的标记。
如果你使用的是Sass等，那么有用 ：要返回一个更抽象的值，比如断点名，而不是px值，你可以这样做：
- 创build一个将存储断点名称的元素，例如
<div id="breakpoint-indicator" /> - 使用CSS媒体查询更改此元素的内容属性，例如“大”或“移动”等（与上述相同的基本媒体查询方法，但设置CSS'内容'属性而不是'最大宽度'）。
- 使用js或jquery获取CSS内容属性值（例如
$('#breakpoint-indicator').css('content');），它返回“large”或“mobile”等，具体取决于内容属性由媒体查询设置。 - 按现行价值行事。
现在，您可以像在sass中一样操作相同的断点名称，例如sass： @include respond-to(xs)和js if ($breakpoint = "xs) {} 。
我特别喜欢的是，我可以在css和一个地方定义我的断点名（可能是一个variablesscss文档），我的js可以独立地对它们进行操作。
Lumia手机给出了错误的screen.width（至less在仿真器上）。 所以也许Math.min(window.innerWidth || Infinity, screen.width)将在所有设备上工作？
或者更疯狂的东西：
for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {} var deviceWidth = i;
我认为使用window.devicePixelRatio比window.matchMedia解决scheme更优雅：
if (window.innerWidth*window.devicePixelRatio <= 960 && window.innerHeight*window.devicePixelRatio <= 640) { ... }
