在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) { ... }