【備忘録】PCとiPadではviewportを読み込ませないようにする
レスポンシブで制作し、
iPadで見た際にPC表示になっているものの
端が切れたり･･･拡大縮小もできず･･･
という出来事がきっかけで
PCと同じ見た目で表示させたい場合はそもそもviewport設定が無ければいい。
という記事と出会い、
スマートフォンと
PC および iPad でviewport設定を以下のようにjsで振り分け。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { //iPhone、iPod、Androidの設定 document.write('<meta name="viewport" content="width=device-width,initial-scale=1">'); }else{ //それ以外（PC、iPadなど）の設定 document.write(''); } </script> |
========================
▼参考にさせていただきました。ありがとうございます。
●レスポンシブWebデザインでiPad向けにPC表示を見せるときの注意点
https://jiyumemo2.com/2016/04/fix-responsive-for-ipad.html
●iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分ける
http://d.hatena.ne.jp/soratomo0714/20161004/p1
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
