html怎么获取设备宽度,css - 在javascript中获取设备宽度

css - 在javascript中获取设备宽度

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

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

@media screen and (max-width:640px) {

/* ... */

}

和

@media screen and (max-device-width:960px) {

/* ... */

}

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

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

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

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

8个解决方案

184 votes

您可以通过screen.width属性获取设备屏幕宽度。

有时，在处理窗口大小通常小于设备屏幕大小的桌面浏览器时，使用window.innerWidth(通常不在移动设备上找到)而不是屏幕宽度也很有用。

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

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

Bryan Rieger answered 2019-07-21T16:59:39Z

50 votes

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

answered 2019-07-21T17:00:04Z

12 votes

我只是有这个想法，所以也许它是短视的，但它似乎运作良好，可能是你的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标签上似乎很可怕，那么也许你可以放一个不同的标签，一个仅用于此目的的标签。 为了我的目的，html标签工作正常，不会影响我的标记。

如果您正在使用Sass等，则非常有用：要返回更抽象的值，例如断点名称，而不是px值，您可以执行以下操作：

创建一个将存储断点名称的元素，例如

使用css媒体查询更改此元素的content属性，例如： G。 “大”或“移动”等(与上面相同的基本媒体查询方法，但设置css'content'属性而不是'max-width')。

使用js或jquery(jquery，例如@include respond-to(xs))获取css内容属性值，该值返回“large”或“mobile”等，具体取决于媒体查询设置的内容属性。

根据当前价值行事。

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

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

RogerRoger answered 2019-07-21T17:02:02Z

4 votes

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

if (window.innerWidth*window.devicePixelRatio <= 960

&& window.innerHeight*window.devicePixelRatio <= 640) {

...

}

maxime schoeni answered 2019-07-21T17:02:30Z

3 votes

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

这应该处理大多数情况。

ZNS answered 2019-07-21T17:03:04Z

2 votes

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;

Munawwar answered 2019-07-21T17:03:39Z

2 votes

核实

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]

MEAbid answered 2019-07-21T17:04:13Z

1 votes

你可以轻松使用

document.documentElement.clientWidth

Re Undo answered 2019-07-21T17:04:47Z