0

メディア クエリである限り、幅の変更を検出するために JavaScript を使用しています。HTMLを移動する必要があるため、両方が必要です。発生する時間が同じではないことを除いて、どちらも機能します。スクロールバーがそれらの1つに含まれていると推測しますが、幅がブラウザー間で同じではないため、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 );
});

ありがとう！

4

1 に答える 1

0

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 );
});
于 2013-10-25T19:44:41.223 に答える