在javascript中获取设备宽度

Get the device width in javascript

本文关键字：获取 javascript      更新时间：2023-09-26

是否有一种方法来获得用户设备宽度，而不是viewport宽度，使用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的回答很有用，其中一个问题是，在高密度显示屏上，苹果设备会报告屏幕。而Android设备则以物理像素报告。(参见http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html。)我建议在支持matchMedia的浏览器上使用if (window.matchMedia('(max-device-width: 960px)').matches) {}。

我只是有这个想法，所以也许这是短视的，但它似乎工作得很好，可能是你的CSS和JS之间最一致的

在你的CSS中，你可以根据@media screen的值设置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媒体查询更改该元素的内容属性，例如:"large"或"mobile"等(与上面相同的基本媒体查询方法，但设置css 'content'属性而不是'max-width')。
  3. 获取css内容属性值使用js或jquery (jquery如$('#breakpoint-indicator').css('content');)，返回"大"，或"移动"，等取决于什么内容属性设置为媒体查询。
  4. 作用于当前值

现在你可以像在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

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>

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

Lumia手机屏幕错误。宽度(至少在模拟器上)。所以也许Math.min(window.innerWidth || Infinity, screen.width)将适用于所有设备?

或者更疯狂的:

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

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

来跟踪设备宽度

就像

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

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

相关文章：