2

我有一个 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 上查看它时，它没有。

谁能帮我写一个函数来使用浏览器宽度定位移动设备？

4

1 回答 1

1

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

视口元标记

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

它看起来像这样：

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

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

例如，如果您的移动设计故意布置在 320 像素，您可以指定视口宽度：

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

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

于 2015-01-19T18:39:06.340 回答