根据浏览器大小添加和添加内容答案

【问题标题】：Prepend and append content based on browser size根据浏览器大小添加和添加内容
【发布时间】：2015-04-14 08:42:49
【问题描述】：

我有这个函数可以根据窗口大小是否小于 640 像素或更大来在 DOM 周围移动 HTML 元素。我正在使用 prepend 和 append 移动图像，但是因为每次调整窗口大小时都会触发该函数，所以我想我是在询问性能问题。

代码：

function moveDealsImage() {

    var mobile_width = 640;
    var wi = $(window).width();

    if (wi < mobile_width) {
        $( ".deals-header" ).prepend( $("div.htp") );
    } else {
        $( ".deals-header" ).append( $("div.htp") );
    }
}
window.addEventListener("resize", moveDealsImage);
moveDealsImage();

我需要把听众留在那里。

有没有办法做到这一点，但每次 if 或 else 语句为真时，只在元素前添加/附加元素一次？（而不是发生在每个像素变化上）

【问题讨论】：

标签： javascript jquery append addeventlistener prepend

【解决方案1】：

您可以做一些事情来优化它。

第一个选项是仅在状态从移动设备更改为桌面设备或反向时执行 moveDealsImage 函数。所有其他调整大小都可以忽略。

这可以通过使用类似下面的代码来完成：

var mobile_width = 640;
var is_mobile = (window.innerWidth <= mobile_width);
function moveDealsImage(e) {

    // Only execute the function when then state changes from mobile to desktop or reverse
    if( 
        ! is_mobile && window.innerWidth > mobile_width || 
        is_mobile && window.innerWidth <= mobile_width 
    )
        return;

    // Update state
    is_mobile = (window.innerWidth <= mobile_width);

    console.log('your code here');
}
window.addEventListener("resize", moveDealsImage);
moveDealsImage();

另一个更好的解决方案是使用 CSS 媒体查询。这可以通过以下 CSS 和 HTML 来完成。

.desktop-deals-header {
   display: block;
}
.mobile-deals-header {
   display: none;
}

@media only screen 
and (max-width : 640px) {
   .desktop-deals-header {
      display: none;
   }
   .mobile-deals-header {
      display: block
   }
}

然后在您的 HTML 中添加两个标题，一个用于桌面，一个用于移动。

<div class="mobile-deals-header">Mobile header</div>
<div class="desktop-deals-header">Desktop header</div>

【讨论】：

太棒了，谢谢 Wim。我已经有了 CSS 解决方案，我只是想探索如何用 JS 来做，你的代码做得很出色，干杯！