获取javascript中的设备宽度

Question

有没有办法使用 javascript 获取用户设备宽度，而不是视口宽度？

CSS 媒体查询提供了这个，我可以说

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

和

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

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

但是，如果我根据设备宽度调用 javascript 绑定，我似乎仅限于测试视口宽度，这意味着如下所示的额外测试，

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

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

Answer 1

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

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

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

Answer 2

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。

Answer 3

我刚刚有了这个想法，所以也许它是短视的，但它似乎运作良好，并且可能是您的 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 值，您可以执行以下操作：

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

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

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

Answer 4

你应该使用

document.documentElement.clientWidth

算是跨浏览器兼容，和jQuery(window).width();方法一样。 使用。

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

Answer 5

检查

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

Answer 6

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

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

Answer 7

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

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

Answer 8

您可以轻松使用

document.documentElement.clientWidth

Answer 9

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;

Answer 10

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

就像

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

Answer 11

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

Answer 12

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