媒体查询加上 javascript 窗口调整不同宽度答案

【问题标题】：Media queries plus javascript window resize different width媒体查询加上 javascript 窗口调整不同宽度
【发布时间】：2013-10-26 03:44:41
【问题描述】：

我正在使用一些 javascript 来检测宽度变化，只要是媒体查询。我需要两者，因为我需要移动 html。两者都有效，除了它们发生的时间不同，我猜测滚动条包含在其中一个中，但假设滚动条为 15px 是愚蠢的，因为它的宽度在浏览器中是不一样的。有更好的方法吗？

我的媒体查询是这样激活的：

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)" />

并使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

虽然我的 JS 看起来像这样：

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

var pause = 100;
$(window).resize(function() {
    delay(function() {
        var width = $(window).width();
          if ( width >= 768 ) {
            if (window.myDevice != 'desktop' || window.myDevice === undefined) {
                window.myDevice = 'desktop';
                $('#head').prepend($('#branding'));
            }
        } else if ( width <= 767 ) {
            if (window.myDevice != 'mobile' || window.myDevice === undefined) {
                window.myDevice = 'mobile';
                $('#content').prepend($('#branding'));
            }
        }
    }, pause );
});

谢谢！

【问题讨论】：

滚动条在浏览器中是相同的，只是在操作系统中不同。即便如此，它们的宽度也往往相同。即使视觉宽度看起来不那么宽，物理宽度也是。
它总是延迟，还是只是第一个窗口调整大小？我的猜测是延迟是浏览器下载样式表文件所需的时间长度。
显然您在媒体查询中使用了“设备宽度”一词，因此它与 Jquery 上的“宽度”有很大不同。
这是在视口中找到的，而不是在媒体查询中。
这似乎有帮助：andylangton.co.uk/blog/development/…

标签： javascript jquery css media-queries

【解决方案1】：

使用在http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript 找到的脚本，我已经解决了这个问题。

新增功能

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

然后在我的(window).resize() 中使用viewport().width 引用宽度，如下所示：

$(window).resize(function() {
    delay(function() {
        var width = $(window).width();
          if ( width >= 768 ) {
            if (window.myDevice != 'desktop' || window.myDevice === undefined) {
                window.myDevice = 'desktop';
                $('#head').prepend($('#branding'));
            }
        } else if ( width <= 767 ) {
            if (window.myDevice != 'mobile' || window.myDevice === undefined) {
                window.myDevice = 'mobile';
                $('#content').prepend($('#branding'));
            }
        }
    }, pause );
});

【讨论】：