jquery - jQuery 检测页面大小调整或平板电脑和移动设备

Question

我正在我的网站上创建一个断点，以便它可以响应平板电脑和移动设备。一切顺利，除了我想从底部移动一段内容并将其附加到导航下方。

我有一个简单的两列布局右列和左列。HTML 片段位于右栏中。我需要检测屏幕大小何时等于或低于 558 像素，然后四处移动。

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>

工作解决方案：我使用 .insertBefore() 而不是 .preprend() （它将所有内容移动到左列 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>

Answer 1

这不应该在 javascript 中完成。

您可以使用 css 媒体查询。

@media screen and (max-width: 558px) {
  ... do your thing
}

读一读。_

Answer 2

http://api.jquery.com/resize/

$(window).resize(function() {
   if ($('.content-left').is(':empty') && $(window).width()  <= 559){

   console.log('Window resized!!!');
   $(".now-playing-title, h1.now-playing-title, .live-now-block, .now-playing").prependTo('.content-left');
   }
});