0

タブレットやモバイル デバイスに反応するように、サイトにブレーク ポイントを 1 つ作成しています。コンテンツの一部を下から移動して、ナビゲーションの下に追加したいことを除いて、すべてうまくいっています。

右列と左列の単純な 2 列のレイアウトがあります。HTML の断片は右側の列にあります。画面サイズが 558px 以下になったことを検出し、移動する必要があります。

HTML:

<div class="main wrapper">
    <div class="content-left"></div>
    <div class="content-right">
        // three divs containing awesome content
    </div>
</div>

jQuery: 

 <script>
    var windowsize = $(window).width();

   if (windowsize < 559) {
   //if the window is less than 559px wide then prepend the following
   console.log('Window resized!!!');
   $(".now-playing-title, h1.now-playing-title, .live-now-block, .now-playing").prependTo('.content-left'); 
}

</script>

実用的なソリューション: .preprend() の代わりに .insertBefore() を使用し (すべてを列左の div 内に移動)、すべてを document.ready() でラップして、ページが完全にロードされた後に起動するようにしました。

 <script>
    $(document).ready(function() {

    var windowsize = $(window).width();

    if (windowsize < 559) {
    //if the window is less than 559px wide then append NowPlaying
    console.log('Window resized!!!');
    $(".now-playing-title, h1.now-playing-title, .live-now-block, .now-playing").insertBefore('.content-left'); 
    }    
    });
</script>
4

2 に答える 2