在javascript中获取设备宽度

Question

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

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

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

和

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

如果我的目标是横向智能手机,这将非常有用.例如,在iOS max-width:640px上,即使在iPhone 4上,也会针对横向和纵向模式进行声明. 据我所知,这不是Android的情况,因此在此实例中使用设备宽度成功地定位两个方向,没有针对桌面设备.

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

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

考虑到设备宽度可用于css,这对我来说似乎并不优雅.

Answer 1

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

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

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

Answer 2

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

Answer 3

我只是有这个想法,所以也许它是短视的,但它似乎运作良好,可能是你的CSS和JS之间最一致的.

在CSS中,您可以根据@media屏幕值设置html的max-width值:

@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标记的max-width值:

maxwidth = $('html').css('max-width');

现在您可以使用此值进行条件更改:

If (maxwidth == '480px') { do something }

如果将最大宽度值放在html标签上似乎很可怕,那么也许你可以放一个不同的标签,一个仅用于此目的的标签.为了我的目的,html标签工作正常,不会影响我的标记.

如果您正在使用Sass等,则非常有用:要返回更抽象的值,例如断点名称,而不是px值,您可以执行以下操作:

1. 创建一个将存储断点名称的元素,例如 <div id="breakpoint-indicator" />
2. 使用css媒体查询更改此元素的内容属性,例如"大"或"移动"等(与上面相同的基本媒体查询方法,但设置css'content'属性而不是'max-width').
3. 使用js或jquery(jquery eg $('#breakpoint-indicator').css('content');)获取css内容属性值,返回"大"或"移动"等,具体取决于媒体查询设置的内容属性.
4. 根据当前价值行事.

现在你可以像在sass中那样使用相同的断点名称,例如sass:@include respond-to(xs)和js if ($breakpoint = "xs) {}.

我特别喜欢的是,我可以在css和一个地方(可能是变量scss文档)中定义我的断点名称,并且我的js可以独立地对它们起作用.

Answer 4

你应该使用

document.documentElement.clientWidth

算是跨浏览器兼容，和jQuery(window).width();方法一样。使用。

有关详细信息，请查看：https : //ryanve.com/lab/dimensions/

Answer 5

核实

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Answer 6

var width = Math.max(window.screen.width, window.innerWidth);

这应该可以处理大多数情况。

Answer 7

根据 Bootstrap 用于设置其响应断点的方法，以下函数根据屏幕宽度返回 xs、sm、md、lg 或 xl：

console.log(breakpoint());

function breakpoint() {
    let breakpoints = {
        '(min-width: 1200px)': 'xl',
        '(min-width: 992px) and (max-width: 1199.98px)': 'lg',
        '(min-width: 768px) and (max-width: 991.98px)': 'md',
        '(min-width: 576px) and (max-width: 767.98px)': 'sm',
        '(max-width: 575.98px)': 'xs',
    }

    for (let media in breakpoints) {
        if (window.matchMedia(media).matches) {
            return breakpoints[media];
        }
    }

    return null;
}

Answer 8

我认为使用window.devicePixelRatio比window.matchMedia解决方案更优雅：

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

Answer 9

您可以轻松使用

document.documentElement.clientWidth