Question

我正在使用一些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 );
});

谢谢！

Answer 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' ] };
}

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

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

媒体查询和javascript窗口调整不同的宽度

1 个答案: