JavaScript与媒体查询的比较

Question

我正在考虑为我的网站创建一个响应式框架——这对我来说是第一次。没有花哨的东西，只需要在移动端、平板电脑和桌面上实现响应。

我很满意媒体查询的工作方式，但是通过JavaScript添加类似于另一种可行的选项。

做这样的事情将会很容易:

function queryViewport() {

    var $window = $(window);
    var $body = $("body");

    var windowWidth = $window.width();
    var windowHeight = $window.height();

    // Query window sizes to determine whether device is to be
    // classified as a small mobile device or a larger tablet/
    // desktop device.
    var isMobile = windowWidth < 600 || windowHeight < 600;

    $body.toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);

    // Calculate whether viewport is portrait or landscape
    var isPortrait = windowHeight > windowWidth;

    $body.toggleClass("portrait", isPortrait).toggleClass("landscape", !isPortrait);
}

然而，我不是这个领域的专家 - 我是否遗漏了什么或者真的如此简单？欢迎任何建议。

- dotnetnoob

---

这种方法可行。我喜欢媒体查询与 CSS 保持在一起，这样其余的格式化就可以进行了。 - jalynn2

这并不是那么简单，因为有大量的宽度（和设备宽度，要注意区别）存在。我总是建议使用http://mobiledetect.net。 - loveNoHate

Answer 1

您可以使用这个压缩后的jQuery代码片段来检测您的用户是否正在使用移动设备。如果您需要测试特定的设备，我在下面提供了一组JavaScript代码片段，可用于检测各种移动手持设备，如iPad、iPhone、iPod、iDevice、Andriod、Blackberry、WebOs和Windows Phone。

if(jQuery.browser.mobile)
{
   console.log("You are using a mobile device!");
}
else
{
   console.log("You are not using a mobile device!");
}

查看更多：使用jQuery检测移动设备

请参见下面的链接以了解差异

哪个更好：CSS媒体查询还是jQuery Mobile？

- Hamix

---

这是一个不错的JS库，但从来没有像http://mobiledetect.net那样完整。 - loveNoHate

jQuery.browser.mobile 更为流行，但是你提出的库也很不错。 - Hamix

OP询问的是尺寸定位而不是设备定位。我不确定建议使用库来检测移动设备是否相关。通常，网站应该根据尺寸而不是设备类型进行视觉适应。 - RichieAHB

@richieahb 如果你仔细看代码，你会注意到： 移动浏览器或其他浏览器 - Hamix

Answer 2

我建议使用媒体查询，因为所有未来的修改都可以在CSS中完成，而无需将更多逻辑添加到单独的JS文件中以适应新的断点。

此外，CSS解决方案支持IE9+，并且有JS polyfills（Respond）用于向后兼容。基本上它只是内置在CSS中，并且运作良好。重写相同的逻辑以JavaScript形式，每个新大小都需要一个新类别，似乎毫无意义。

除此之外，媒体查询允许您针对不同的媒体类型（如打印），或者如果您想使用基于高度的媒体查询或针对Retina显示器进行定位，也可以这样做，而无需添加新类别。按照惯例，通常会使用具有JS后备的媒体查询，我认为没有理由建议其他方式。

- RichieAHB

Answer 3

JS根据获取视口高度和宽度的方式会产生不同的结果：

在这种情况下，您可以使用window.outerWidth、window.innerWidth、document.documentElement.clientWidth来获取屏幕宽度。所有这些都会产生不同的结果，但第二个将给您与CSS @media断点相同的值。

$(window).width()也与@media断点不同。

它取决于浏览器的差异，例如是否考虑垂直滚动条。最好使用CSS。

- marko-36