Question

我正在为我的网站创建一个响应式框架 - 这是我的第一个。没有花哨的东西只是通过手机响应 - ＆gt;平板电脑 - ＆gt;桌面。

我对媒体查询的工作方式感到满意，但是通过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，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?

Answer 2

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

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

除此之外，媒体查询允许您将CSS定位为不同的媒体类型（如打印），或者如果您想使用基于高度的媒体查询或目标视网膜显示，您可以执行此操作而无需添加新类。通常，惯例是使用具有JS回退的媒体查询，我认为没有理由不这样做。

Answer 3

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

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

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

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

javascript与媒体查询

3 个答案:

What is better: CSS media queries or JQuery mobile?