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

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

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

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

使用js或jquery(例如jQuery $('#breakpoint-indicator').css('content');)获取css内容属性值，这将返回“大”或“移动”等，具体取决于媒体查询将内容属性设置为什么。

根据当前值进行操作。

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

我对此特别喜欢的是，我可以在css和一个位置(可能是变量scss文档)中全部定义断点名称，而我的js可以独立地对其执行操作。