タブレット問題

タブレット問題 iPad（10th Gen）820×1180 iPad Air　820×1180 iPad mini6　744×1133 https://www.genz.jp/useful_information/ipad_size_quickreferencematrix/

 

横にしたとき 10インチアイフォンで

ヘッダーメニューを1180までに収めないといけない

と思ったが、

タブレットの場合のみ、 ヘッダーが1300で全部見えるなら、 1300のビューポートにすることで対応

 

<?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";


//  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');


//これだと　モバイルフレンドリーテストが合格しにくいだから↑　そのまま

if (window.orientation !== 0) {
//meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
}
else{
meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
}  



document.getElementsByTagName('head')[0].appendChild(meta);
document.getElementsByTagName("head")[0].appendChild(link);
</script>

<?php elseif(wp_is_mobile())://タブレットのviewport ?> 
    <script type="text/javascript">
var meta = document.createElement('meta');
var link = document.createElement("link");
meta.setAttribute('name', 'viewport');
link.rel = "stylesheet";


    meta.setAttribute('content', 'width=1300px,maximum-scale=1.0');

 document.getElementsByTagName('head')[0].appendChild(meta);
document.getElementsByTagName("head")[0].appendChild(link);
</script>

<?php else: //pc ?>
<script type="text/javascript">
var meta = document.createElement('meta');
var link = document.createElement("link");
meta.setAttribute('name', 'viewport');
link.rel = "stylesheet";


    meta.setAttribute('content', 'width=device-width,initial-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; ?>

<?php //メモ
//window.orientation == 0 回転していない

?>

 

 

 

なので、できるだけ、1200くらいで収まるように作ったほうがいいけど でもまあ 案件によるな