Question

有没有办法使用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。

Answer 1

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

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

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

Answer 2

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) {}。

Answer 3

我刚才有这个想法，所以也许这是短视的，但它看起来效果很好，可能是你和CSS之间最一致的。

在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标签上似乎很可怕，那么也许你可以放一个不同的标签，一个仅用于此目的的标签。为了我的目的，html标签工作正常，不会影响我的标记。

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

创建一个将存储断点名称的元素，例如： <div id="breakpoint-indicator" />
使用css媒体查询更改此元素的content属性，例如： G。 “大”或“移动”等（与上面相同的基本媒体查询方法，但设置css'内容'属性而不是'max-width'）。
使用js或jquery（jquery例如$('#breakpoint-indicator').css('content');）获取css内容属性值，该值返回“large”或“mobile”等，具体取决于媒体查询设置的内容属性。< / LI>
对当前价值采取行动。

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

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

Answer 4

我认为使用page_html <- read_html("http://competitie.vttl.be/index.php?menu=6&sel=36665&result=1&category=1") > page_html %>% html_nodes("td:nth-child(1) :nth-child(2) :nth-child(3).DBTable_first") %>% html_text() [1] "A [+]" > identical((page_html %>% html_nodes("td:nth-child(1) :nth-child(2) :nthchild(3) .DBTable_first") %>% html_text()),"A [+]") [1] FALSE > page_html %>% html_nodes("td:nth-child(1) :nth-child(2) :nth-child(4).DBTable_first") %>% html_text() [1] "B0" > identical((page_html %>% html_nodes("td:nth-child(1) :nth-child(2) :nthchild(4) .DBTable_first") %>% html_text()),"B0") [1] TRUE比window.devicePixelRatio解决方案更优雅：

window.matchMedia

Answer 5

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

这应该处理大多数情况。

Answer 6

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 7

检查

int index = 2;
SendMessage(hwnd, LVM_GETCOLUMNW, index, lpRemoteBuffer);

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Answer 8

您可以轻松使用

document.documentElement.clientWidth

Answer 9

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

就像

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

Answer 10

您应该使用

document.documentElement.clientWidth

它被认为是跨浏览器的兼容性，与jQuery（window）.width（）;的方法相同。用途。

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

Answer 11

基于Bootstrap用来设置其Responsive breakpoints的方法，以下函数根据屏幕宽度返回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;
}

在javascript中获取设备宽度

11 个答案: