在 javascript 中获取设备宽度

2022-08-30 03:02:03

有没有办法使用javascript获取用户的设备宽度,而不是视口宽度?

CSS媒体查询提供了这一点,正如我所说

@media screen and (max-width:640px) {
    /* ... */
}

@media screen and (max-device-width:960px) {
    /* ... */
}

如果我以横向定位智能手机,这将非常有用。例如,在 iOS 上,声明的将同时针对横向和纵向模式,即使在 iPhone 4 上也是如此。据我所知,Android的情况并非如此,因此在这种情况下使用设备宽度可以成功地针对两个方向,而不会针对桌面设备。max-width:640px

但是,如果我基于设备宽度调用javascript绑定,我似乎仅限于测试视口宽度,这意味着需要进行额外的测试,如下所示,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

这对我来说似乎并不优雅,因为暗示设备宽度可用于css。


答案 1

可以通过该属性获取设备屏幕宽度。有时,在处理窗口大小通常小于设备屏幕大小的桌面浏览器时,使用(通常在移动设备上找不到)而不是屏幕宽度也很有用。screen.widthwindow.innerWidth

通常,在处理移动设备和桌面浏览器时,我会使用以下方法:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

答案 2

Bryan Rieger的有用答案的一个问题是,在高密度显示器上,苹果设备以倾斜度报告屏幕宽度,而Android设备以物理像素报告。(请参阅 http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 。我建议在支持 matchMedia 的浏览器上使用。if (window.matchMedia('(max-device-width: 960px)').matches) {}