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);
}

但是，我不是该领域的专家-我错过了什么吗？真的那么简单吗？

所有建议表示赞赏。

Answer 1

您可以使用这个缩小的jQuery代码段来检测您的用户是否正在使用移动设备进行查看。 如果您需要测试特定的设备，我在下面提供了一系列JavaScript代码段，这些代码段可用于检测各种移动手持设备，例如iPad，iPhone，iPod，iDevice，Andriod，Blackberry，WebO和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？

Answer 2

我建议媒体查询，因为所有将来的修改都可以在CSS中完成，而不必为新的断点在单独的JS文件中添加越来越多的逻辑。

此外，CSS解决方案一直支持到IE9 +，并且具有JS polyfills（ Respond ）以实现向后兼容性。 基本上，它只是内置在CSS中并且运行良好。 似乎没有必要用javascript重写相同的逻辑，每个新的大小都有一个新的类。

最重要的是，媒体查询使您可以将CSS定位为不同的媒体类型，例如打印，或者，如果您要使用基于高度的媒体查询或目标视网膜显示，则无需添加新类就可以做到这一点。 通常，惯例是将媒体查询与JS备用广告一起使用，我认为没有其他建议。

Answer 3

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

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

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

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