javascript 与媒体查询答案

【问题标题】：javascript vs media queriesjavascript 与媒体查询
【发布时间】：2014-11-09 01:38:02
【问题描述】：

我正在考虑为我的网站创建一个响应式框架——这对我来说是第一次。没有花哨的东西，只是通过手机 -> 平板电脑 -> 桌面做出响应。

我对媒体查询的工作方式很满意，但是通过 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);
}

但是，我不是这方面的专家 - 我错过了什么还是真的那么简单？

感谢所有建议。

【问题讨论】：

这种方法可行。我喜欢媒体查询保留在 CSS 中，其余的格式都在 CSS 中发生。
从来没有那么简单，因为那里有过多的宽度（和设备宽度，注意区别）。我总是建议mobiledetect.net。

标签： javascript responsive-design media-queries

【解决方案1】：

你可以使用这个缩小的 jQuery sn-p 来检测你的用户是否是使用移动设备查看。如果您需要测试特定的我在下面包含了一组 JavaScript sn-ps 可用于检测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!");
}

查看更多DETECT MOBILE DEVICES USING JQUERY

查看下面的链接了解区别

What is better: CSS media queries or JQuery mobile?

【讨论】：

这对于一个 JS 库来说还不错，但从来没有像 mobiledetect.net 那样完整。
jQuery.browser.mobile 更受欢迎但是你提出的库也不错。
OP 询问的是尺寸定位而不是设备定位。我不确定是否建议使用一个库来检测移动设备是否相关。通常，网站应根据大小而不是设备类型进行视觉调整。
@richieahb 如果你仔细看代码你会注意到他会意识到：移动浏览器或其他浏览器

【解决方案2】：

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

此外，CSS 解决方案支持低至 IE9+，并且有 JS polyfills (Respond) 用于向后兼容。基本上它只是内置在 CSS 中并且运行良好。在 javascript 中重写相同的逻辑似乎没什么意义，每个新尺寸都有一个新类。

最重要的是，媒体查询允许您将 CSS 定位为不同的媒体类型，例如打印，或者如果您想使用基于高度的媒体查询或目标视网膜显示，您可以这样做而无需添加新的类。通常，约定是使用带有 JS 回退的媒体查询，我认为没有理由提出其他建议。

【讨论】：

【解决方案3】：

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

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

$(window).width()也是，和@media断点不同。

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

【讨论】：