获取javascript中的设备宽度

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

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

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

及

如果我的目标是横向智能手机，这很有用。例如，在iOS上，一个

max width:640px

的声明将同时针对横向和纵向模式，即使在iPhone4上也是如此。据我所知，Android的情况并非如此，因此在本例中使用设备宽度成功地针对两个方向，而不针对桌面设备

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

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

---

if（$（window）.width（）您可以通过screen.width属性获取设备屏幕宽度。

有时，在处理窗口大小通常小于设备屏幕大小的桌面浏览器时，使用window.innerWidth（在移动设备上通常找不到）而不是屏幕宽度也很有用

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

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

Bryan Rieger有用答案的一个问题是，在高密度显示器上，苹果设备报告screen.width的单位是凹陷，而Android设备报告screen.width的单位是物理像素。（请参阅。）我建议使用
if（window.matchMedia（'（max device width:960px））。matches{
在支持matchMedia的浏览器上。
我刚刚有了这个想法，所以可能是短视的，但它似乎工作得很好，可能是CSS和JS之间最一致的

在CSS中，根据@media screen值设置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值，可以执行以下操作：

创建一个将存储断点名称的元素，例如

使用css媒体查询更改此元素的内容属性，例如“大”或“移动”等（与上述基本媒体查询方法相同，但设置css的“内容”属性而不是“最大宽度”）
使用js或jquery（jquery例如
$（“#断点指示器”）.css（'content'）；
）获取css内容属性值，根据媒体查询设置的内容属性返回“大”或“移动”等
根据当前值进行操作
现在，您可以像在sass中一样对相同的断点名称进行操作，例如sass:
@include-respond-to（xs）
，以及js
if（$breakpoint=“xs）{}

我特别喜欢的是，我可以在css和一个地方（可能是变量scss文档）定义断点名称，我的js可以独立处理它们。
Lumia phones给出了错误的screen.width（至少在emulator上）。
所以也许
Math.min（window.innerWidth | | |无穷大，screen.width）
可以在所有设备上运行

或者更疯狂的事情：

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

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

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

if（window.innerWidth*window.devicePixelRatio检查它

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

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

var width=Math.max（window.screen.width，window.innerWidth）；

这应该可以处理大多数情况。
您可以轻松使用

document.documentElement.clientWidth
您可以使用document.documentElement.clientWidth获取客户端的设备宽度，并通过设置间隔来跟踪设备宽度

就像

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

你应该使用

document.documentElement.clientWidth

它被视为跨浏览器兼容性，与jQuery（window）.width（）使用的方法相同

有关详细信息，请参阅：
仅供参考，有一个名为的库，用于检测CSS中设置的最大宽度，并允许您在JS中使用=和==符号（如果其他条件允许）来使用它。我发现它非常有用。有效负载大小小于3KB。
基于Bootstrap用于设置其最大宽度的方法，以下函数返回基于屏幕宽度的xs、sm、md、lg或xl：


console.log（断点（））；
函数断点（）{
设断点={
'（最小宽度：1200px）''xl'，
'最小宽度：992px）和（最大宽度：1199.98px）'lg'，
'（最小宽度：768px）和（最大宽度：991.98px）''md'，
'（最小宽度：576px）和（最大宽度：767.98px）''sm'，
'（最大宽度：575.98px）''xs'，
}
for（让媒体进入断点）{
if（window.matchMedia（media.matches）{
返回断点[媒体]；
}
}
返回null；
}
我注意到，在Android 2.2本机浏览器上，这并不像预期的那样有效。如果我的比例不是1:1，它可以报告更宽的宽度（尽可能宽的页面）这有点令人沮丧。这在Android上的Chrome Beta上返回980，在HTC vivid上的Android浏览器上返回1024。@Alex这些是浏览器的默认视口宽度。如果使用带有
width=device width
的视口元标记，您应该得到实际值。window.innerWidth在Iphone（Chrome/Safari）上返回980。这是怎么回事？没什么区别。这怎么会有这么多的向上投票呢？
var-width=（window.innerWidth>0）？window.innerWidth:screen.width；
在iphone 6和6 Plus上返回667。此解决方案无法正常工作。请尝试此网站了解设备的正确尺寸。
modernizer
可以帮助您做到这一点”关于第一条评论：你可能想谷歌“现代化”
document.documentElement.clientWidth