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

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

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

 

クロームだと、

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

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

シークレットで１回のみ確認できるのか？

 

<?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　試してない