关于CSS：使用JavaScript获取设备宽度


Get the device width in javascript

有没有一种方法可以使用javascript获取用户设备的宽度，而不是视口的宽度？

我可以说CSS媒体查询提供了这一点

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

和

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

如果我将智能手机定位为横向模式，这将很有用。 例如，在iOS上，即使在iPhone 4上，max-width:640px声明也将同时针对横向和纵向模式。据我所知，对于Android而言并非如此，因此在这种情况下使用device-width成功定位 两种方向，但不定位桌面设备。

但是，如果我基于设备宽度调用javascript绑定，则似乎只能测试视口宽度，这意味着需要进行以下额外测试，

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

考虑到设备宽度可供CSS使用的提示，这对我来说似乎并不优雅。

相关讨论

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

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

1
 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
相关讨论

布莱恩·里格(Bryan Rieger)有用的回答的一个问题是，在高密度显示器上，苹果设备报告的screen.width是倾斜，而安卓设备报告的是物理像素。 (请参阅http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html。)我建议在支持matchMedia的浏览器中使用if (window.matchMedia('(max-device-width: 960px)').matches) {}。

相关讨论

我只是有这个主意，所以也许它是短视的，但它似乎运作良好，并且可能是CSS和JS之间最一致的。

在CSS中，根据@media屏幕值设置html的最大宽度值：

1
2
3
4
5
6
7
8
9
@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标签的最大宽度值即可：

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

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

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

如果将max-width值放在html标记上似乎很吓人，那么也许您可以放置??另一个标记，该标记仅用于此目的。出于我的目的，html标记可以正常工作，并且不会影响我的标记。

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

  • 创建一个将存储断点名称的元素，例如
  • 使用CSS媒体查询可更改此元素的content属性，例如。 G。"大"或"移动"等(与上述基本媒体查询方法相同，但设置CSS的"内容"属性而非"最大宽度")。
  • 使用js或jquery(例如$('#breakpoint-indicator').css('content');的jQuery)获取css内容属性值，这些值将返回"大"或"移动"等，具体取决于媒体查询将内容属性设置为什么。
  • 根据当前值进行操作。

    • 现在，您可以像在sass中一样对相同的断点名称进行操作，例如sass：@include respond-to(xs)和js if ($breakpoint ="xs) {}。

    我对此特别喜欢的是，我可以在css和一个位置(可能是变量scss文档)中全部定义断点名称，而我的js可以独立地对其执行操作。

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

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

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

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

    您可以轻松使用

    document.documentElement.clientWidth

    相关讨论

    核实

    1
    2
    3
    4
    5
    6
    7
    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/zh-CN/docs/Web/API/Window/matchMedia

    Lumia手机的屏幕宽度错误(至少在模拟器上)。
    那么Math.min(window.innerWidth || Infinity, screen.width)可能适用于所有设备吗？

    或更疯狂的东西：

    1
    2
    for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
    var deviceWidth = i;
    相关讨论

    你应该用

    1
    document.documentElement.clientWidth

    它被视为跨浏览器兼容性，并且与jQuery(window).width();相同。用途。

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

    与FYI一样，有一个名为Breakpoints的库，它可以检测CSS中设置的最大宽度，并允许您在，> =和==符号使用它。我发现它非常有用。有效负载大小小于3 KB。

    是的，您可以使用document.documentElement.clientWidth来获取客户端的设备宽度，并通过放置在setInterval上来跟踪设备宽度

    就像

    1
    2
    3
    4
    setInterval(function(){
            width = document.documentElement.clientWidth;
            console.log(width);
        }, 1000);