在 javascript 中获取设备宽度

有没有一种方法可以使用 javascript 获得用户设备宽度，而不是 viewport 宽度?

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

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

还有

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

如果我的目标是横向定位的智能手机，这是很有用的。例如，在 iOS 上，max-width:640px的声明将同时针对横向和纵向模式，甚至在 iPhone4上也是如此。据我所知，Android 的情况并非如此，所以在这个例子中使用设备宽度成功地瞄准了两个方向，而没有瞄准桌面设备。

然而 ，如果我调用基于设备宽度的 javascript 绑定，我似乎仅限于测试 viewport 宽度，这意味着额外的测试，如下所示,

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

这对我来说似乎并不优雅，因为提示设备宽度可用于 css。

273634 次浏览
小开
最佳答案

可以通过 screen.width属性获得设备屏幕宽度。 在处理窗口大小通常小于设备屏幕大小的桌面浏览器时，有时使用 window.innerWidth(通常不在移动设备上)代替屏幕宽度也是有用的。

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

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

Bryan Rieger 的有用答案的一个问题是，在高密度显示器上，苹果设备报告的屏幕宽度是下降的，而 Android 设备报告的是物理像素。(见 http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html)我建议在支持 match Media 的浏览器上使用 if (window.matchMedia('(max-device-width: 960px)').matches) {}。

小开

我刚刚有了这个想法，所以也许它是短视的，但它似乎工作得很好，可能是您的 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 标记的 max-width 值:

maxwidth = $('html').css('max-width');

现在可以使用这个值进行条件更改:

If (maxwidth == '480px') { do something }

如果在 html 标记上添加 max-width 值看起来很吓人，那么也许您可以添加一个不同的标记，一个仅用于此目的的标记。对于我来说，html 标记工作得很好，不会影响我的标记。

如果使用 Sass，etc ，则非常有用: 要返回更抽象的值，如断点名称，您可以执行以下操作，而不是使用 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)和 jsif ($breakpoint = "xs) {}。

我特别喜欢的一点是，我可以在一个地方(可能是一个变量 scss 文档)全部用 css 定义断点名，而且我的 js 可以独立地对它们进行操作。

小开

Lumia 手机屏幕宽度不对(至少在模拟器上是这样)。 也许 Math.min(window.innerWidth || Infinity, 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) {
...
}
小开

检查一下

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

小开

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

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

小开

你可以很容易地使用

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>

小开

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

就像

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

你应该用

document.documentElement.clientWidth

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

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

小开

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

小开

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


提交答案