2020.01.14
363
2019.06.06
こんにちは。フロントエンドエンジニアのつっちーです。
以前の記事で、iPhone SEなど幅320px表示端末での縮小表示に便利なViewport Extraを紹介しました。
- Viewport Extra
おかげさまで、CDNに対して1日約20,000件、公開以来約1,430,000件ものリクエストをいただいております！ たくさんのページでご利用いただいているようで嬉しいです。ありがとうございます！
このライブラリ、実はiPadなどタブレット端末での縮小表示にも使うことができます。
さっそくですが、実例とともに紹介していきましょう。
たとえばこんなとき
- レスポンシブデザイン
- 一般的なタブレット表示幅（768px以上）で、PC向けデザインを表示
- PC向けデザインの最小幅が、一般的なタブレット表示幅（768px）より大きい
@media (min-width: 768px) {
body {
min-width: 1024px;
}
}
タブレット表示幅が、PC向けデザインの最小幅よりも小さく、横スクロールが発生してしまっています。
Viewport Extraで解決
そんなときは、Viewport Extraを使って、タブレット端末でのみ、viewportに最小幅を設定しましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- scriptタグはmetaタグの直後に設置する -->
<script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.3/dist/viewport-extra.min.js"></script>
<script>
var ua = navigator.userAgent
// タブレット端末かどうか
var sp = (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)
var tab = (!sp && (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0))
// タブレット端末でのみ、PC向けデザインの最小幅を、viewportの最小幅に設定
if (tab) new ViewportExtra(1024)
</script>
PC向けデザイン全体が、タブレットの画面幅にピッタリ収まり、横スクロールが発生しなくなりました！
ポイントは、前回と同じく、metaタグの直後にscriptタグを設置すること。
タブレット端末かどうかの判定は、ほかの方法でも問題ありません。また前回紹介した、幅320px表示端末の設定と併用することも可能です。
// タブレットの場合: PC向けデザインの最小幅
// タブレットでない場合: 375px
new ViewportExtra(tab ? 1024 : 375)注意点
注意点は前回と同じです。
- 一度metaタグの値が書き換えられたあと画面を回転（縦横を変更）しても、metaタグの再書き換えは行いません。これは、画面内容がすべて表示されたあとにmetaタグを書き換えても、環境によっては書き換えが無効となってしまうためです。
- 最小の高さ、最大の高さを設定する機能は、いまのところ持たせていません。これは、現在どのブラウザでもmeta[name=”viewport”]タグのheight設定が無視されるためです。
ビューポートの高さを定義します。どのブラウザーでも使用されていません。（MDN）
まとめ
前回のまとめで、「私もいい加減、iPhone 5sから卒業して、シェア減少に貢献しようかと思います」と書きましたが、ごめんなさい、まだ卒業できておりません……。このサイズ、好きなんだよなあ。
ではまた！ つっちーでした。