viewport クローム サファリ 挙動違う 202105現在

サファリだと思うようにできる

読み込み直さなければならないが、。

 

クロームだと、

どうもおかしい。余白ができる 読み込み直しても

多分キャッシュが残っているので、

シークレットで1回のみ確認できるのか?

 

<?php if (is_mobile()) : ?>


<script type="text/javascript">
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
 if (screen.width <= 568 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 // link.href = "<?php echo get_template_directory_uri(); ?>/mobile.css";
 } else {
 // meta.setAttribute('content', 'width=1020px,maximum-scale=1.0');
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 // link.href = "<?php echo get_template_directory_uri(); ?>/style.css";
 }
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>


<?php else: ?>
<script type="text/javascript">
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
 if (screen.width <= 480 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 // link.href = "<?php echo get_template_directory_uri(); ?>/mobile.css";
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 // link.href = "<?php echo get_template_directory_uri(); ?>/style.css";
 }
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>


<?php endif; ?>

 

よくわからんが参考

https://teratail.com/questions/131056 試してない

 

スクロール 上下によって fixed の開始位置 jsクラス追加 削除を変更

【jQuery】下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る

最終

       <script> 
       
   //スクロール上下で数値変更 fixed
var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
 winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {//スクロールDOWNなら
        
        
       if($(window).scrollTop() > 20) {
    $('body').addClass('new_fixed');
  } 
        
        
        
    } else {//スクロールUPなら
        
        
   if($(window).scrollTop() < 240) {
    $('body').removeClass('new_fixed');
  }
        
        
    }
    startPos = winScrollTop;
});
    
   </script>   

 

 

参考

https://hirashimatakumi.com/blog/6997.html

$(window).scroll(function () {
  if($(window).scrollTop() > 20) {
    $('#header').addClass('fixed');
  } else {
    $('#header').removeClass('fixed');
  }
});