在javascript中获取设备宽度

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

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

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

和

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

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

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

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

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

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

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

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

Bryan Rieger有用的答案的一个问题是，在高密度显示器上，Apple设备报告的screen.width是倾斜，而Android设备报告的是物理像素。（请参阅http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html。）我建议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 }

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

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

1. 创建一个将存储断点名称的元素，例如 <div id="breakpoint-indicator" />
2. 使用CSS媒体查询会更改此元素的content属性，例如“大”或“移动”等（与上述基本媒体查询方法相同，但设置CSS的“ content”属性而不是“ max-width”）。
3. 使用js或jquery（例如jquery $('#breakpoint-indicator').css('content');），这将返回“大”或“移动”等，具体取决于媒体查询将内容属性设置为什么。
4. 根据当前值进行操作。

现在，您可以像在sass中一样使用相同的断点名称，例如sass：@include respond-to(xs)和jsif ($breakpoint = "xs) {}。

我对此特别喜欢的是，我可以在一个地方（同时可能是一个变量scss文档）在css中定义所有断点名称，而我的js可以独立地对它们进行操作。

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

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

你应该用

document.documentElement.clientWidth

它被认为是跨浏览器的兼容性，与jQuery（window）.width（）;的方法相同。用途。

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

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

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

核实

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

您可以轻松使用

document.documentElement.clientWidth

Lumia手机的屏幕宽度错误（至少在模拟器上）。所以也许Math.min(window.innerWidth || Infinity, screen.width)可以在所有设备上使用吗？

或更疯狂的东西：

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

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

就像

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

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