148

有没有办法使用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 的提示，这对我来说似乎并不优雅。

4

12 回答 12

242

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

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

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
于 2011-07-27T19:46:18.320 回答
66

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 的浏览器上使用。

于 2012-12-07T00:28:26.440 回答
14

我只是有这个想法，所以也许它是短视的，但它似乎运作良好，并且可能是你的 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 媒体查询更改此元素的内容属性，例如“大”或“移动”等（与上面相同的基本媒体查询方法，但设置 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 可以独立地对它们进行操作。

于 2013-02-18T17:16:43.390 回答
9

你应该使用

document.documentElement.clientWidth

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

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

于 2019-11-05T14:16:07.903 回答
8

核实

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

于 2018-01-29T13:23:05.727 回答
8

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

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

于 2018-02-19T15:23:24.253 回答
7

您可以轻松使用

document.documentElement.clientWidth

更新

例如：

let el = document.getElementById('result');
el.innerText = document.documentElement.clientWidth;
window.addEventListener('resize', function(event) {
    // do what you want
    el.innerText = document.documentElement.clientWidth;
}, true);
<!DOCTYPE html>
  <html>
     <body>
      <div id="result"></div>
     </body>
  </html>

于 2018-05-22T21:51:50.953 回答
5

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

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}
于 2017-05-07T16:09:20.747 回答
3

Lumia 手机给出错误的 screen.width（至少在模拟器上）。那么也许Math.min(window.innerWidth || Infinity, screen.width)可以在所有设备上工作？

或者更疯狂的东西：

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;
于 2015-07-13T10:08:08.847 回答
3

基于 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;
}

于 2020-08-15T18:21:56.190 回答
2

Ya mybe 你可以使用 document.documentElement.clientWidth 来获取客户端的设备宽度，并通过设置 setInterval 来跟踪设备宽度

就像

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);
于 2019-10-16T01:57:48.540 回答
0

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

于 2020-01-06T11:40:48.160 回答