页面刷新后的响应能力是否正常？（HTML 渲染延迟）-解网

问：

当我将屏幕尺寸更改为手机或小于 768 像素的东西时，搜索栏会显示在顶部并移动刷新页面后，首先将其添加到正确的位置。然而，它应该从一开始就到位。当我将屏幕大小调整回全宽时，在页面刷新之前它不见了。您可以检查行为 [链接已删除]，只需在浏览器控制台中切换到某些手机屏幕即可。

此行为的 js 是

    function searchwidget(){

if ($(document).width() <= 767)
{
    $('#search_widget').appendTo('.hidden-md-up.text-xs-center.mobile');
}
else if($(document).width() >= 768)
{
    $('.header-top #search_widget').prependTo('.right-nav');
}

这是模板代码

{block name='header_nav'}
   <nav class="header-nav">
   <div class="container">
    <div class="row">
      <div class="hidden-sm-down">
       <div class="col-md-4 hidden-sm-down" id="_desktop_logo">
            <a href="{$urls.base_url}" class="header-logo">
              <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
            </a>
        </div>
        
        <div class="col-md-5 col-xs-12 left-nav">
          {hook h='displayNav1'}
        </div>
      
        <div class="col-md-3 right-nav">
            {hook h='displayNav2'}
        </div>
      </div>
      <div class="hidden-md-up text-xs-center mobile">
       
        <div class="pull-xs-right" id="_mobile_user_info"></div>
        <div class="pull-xs-right" id="_mobile_cart"></div>
        <div class="pull-xs-left" id="menu-icon">
          <i class="material-icons d-inline">&#xE5D2;</i>
        </div>
        <div class="top-logo" id="_mobile_logo"></div>
        <div class="clearfix"></div>
        
      </div>
    </div>
</div>

{/块}

如何解决这个问题？

JavaScript CSS 模板 Prestashop 响应能力

function searchwidget(){
    
window.addEventListener('resize', function(event) {
if ($(document).width() <= 767)
{
        $('#search_widget').appendTo('.hidden-md-up.text-xs-center.mobile');
    }
    else if($(document).width() >= 768)
    {
        $('.header-top #search_widget').prependTo('.right-nav');
    }
}, true);
}

上一个：在 html5up 模板中更改为 fork awesome

下一个：字体 Awesome sizes for icons on nav-bar

页面刷新后的响应能力是否正常？（HTML 渲染延迟）

Responsiveness working after a page-refresh? (HTML rendering delayed)

评论