タブレットやモバイル デバイスに反応するように、サイトにブレーク ポイントを 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>