在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值,你可以这样做:

  1. 创build一个将存储断点名称的元素,例如<div id="breakpoint-indicator" />
  2. 使用CSS媒体查询更改此元素的内容属性,例如“大”或“移动”等(与上述相同的基本媒体查询方法,但设置CSS'内容'属性而不是'最大宽度')。
  3. 使用js或jquery获取CSS内容属性值(例如$('#breakpoint-indicator').css('content'); ),它返回“large”或“mobile”等,具体取决于内容属性由媒体查询设置。
  4. 按现行价值行事。

现在,您可以像在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.devicePixelRatiowindow.matchMedia解决scheme更优雅:

 if (window.innerWidth*window.devicePixelRatio <= 960 && window.innerHeight*window.devicePixelRatio <= 640) { ... }