レスポンシブ対応だけど、
タブレットはPCと同じ見た目でいいのになー、ということありませんか？
そんな時のための備忘録です。
viewportをjsで切り分け
デバイスごとにviewportを書き換える方法です。
1 2 3 4 5 6 7 8 | $(function(){ varua=navigator.userAgent; if((ua.indexOf('iPhone')>0)||ua.indexOf('iPod')>0||(ua.indexOf('Android')>0&&ua.indexOf('Mobile')>0)){ $('head').prepend(''); }else{ $('head').prepend(''); } } |
ちなみに
1 | if((ua.indexOf('iPhone')>0)||ua.indexOf('iPod')>0||(ua.indexOf('Android')>0&&ua.indexOf('Mobile')>0)){ |
> 0と言う記述はtrueと同義。
この場合、
iPhoneの時か
iPodの時か
Androidの時
もしくはMobileの時
という指定になります。
ポイントはviewport！
レスポンシブ対応のときは、
呪文のように以下のviewportを指定します。
1 | <metaname="viewport"content="width=device-width,initial-scale=1"> |
横幅＝デバイス幅にする設定です。
PCのみ対応していた時代のviewportは
1 | <metaname="viewport"content="width=1200"> |
こんな表記でした。
この設定だと、デバイスの幅を問わず表示幅を1200pxとみなすため、
タブレットで見てもPC表示のまま縮小されます。
それを逆手に取って今回は、
デバイス毎にviewportを書き換えた、という訳です。
まとめ
PCとタブレット表示が一緒だと楽ちんです。
臨機応変に、活用してみてください。
コメント