javascript - 移动设备的浏览器宽度

Question

我有一台 Nexus 5，当我转到 http://ryanve.com/lab/dimensions/ 时，它告诉我我的宽度是360。我知道我的手机分辨率和浏览器的宽度之间存在差异。

但是，当我编写一个函数来更改767下时:

function detectmob() {
    if($(window).width() <= 767) {
        return true;
    }

    else {
        return false;
    }
}

if (detectmob()){

}

else {

}

它在我的手机上不起作用。如果我在笔记本电脑上将浏览器窗口宽度调整为 <= 767，则该功能可以正常工作。当我在 Nexus 5 上查看它时，却没有。

有人可以帮我编写一个使用浏览器宽度定位移动设备的函数吗？

Answer 1

当您通过移动浏览器访问网站时，它会假设您正在查看大型桌面体验，并且您希望看到全部内容，而不仅仅是左上角。因此，它将视口(viewport)宽度设置为(在 iOS Safari 的情况下)980px，将所有内容都塞进它的小显示屏中。

视口(viewport)元标记

输入视口(viewport)元标记，由 Apple 引入，然后由其他人采用和进一步开发。

看起来像这样:

<meta name="viewport" content="">

在 content=""中，您可以输入大量逗号分隔值，但我们现在将重点关注基本值。

例如，如果您的移动设计特意以 320 像素布局，您可以指定视口(viewport)宽度:

<meta name="viewport" content="width=320">

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972