有没有办法使用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 的 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 标签上放置 max-width 值看起来很可怕，那么也许您可以放置一个不同的标签，一个仅用于此目的的标签。出于我的目的，html 标签工作正常，不会影响我的标记。
如果您使用 Sass 等，则很有用：要返回更抽象的值，例如断点名称，而不是 px 值，您可以执行以下操作：
<div id="breakpoint-indicator" />$('#breakpoint-indicator').css('content');）获取 css 内容属性值，根据媒体查询设置的内容属性，返回“大”或“移动”等。现在您可以像在 sass 中一样处理相同的断点名称，例如 sass:@include respond-to(xs)和 js if ($breakpoint = "xs) {}。
我特别喜欢这一点的是，我可以在 css 和一个地方（可能是变量 scss 文档）中定义我的断点名称，并且我的 js 可以独立地对它们进行操作。
你应该使用
document.documentElement.clientWidth
算是跨浏览器兼容，和jQuery(window).width();方法一样。用途。
有关详细信息，请查看：https : //ryanve.com/lab/dimensions/
核实
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