2019.06.06
#192
それいけ!フロントエンド
iPadにPC向けデザインを縮小表示するときにも!Viewport Extraで手軽に縮小表示[2]

投稿日: 2019.06.06
更新日: 2020.04.09

こんにちは。フロントエンドエンジニアのつっちーです。
以前の記事で、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.4/dist/viewport-extra.min.js"></script>
<!-- タブレット端末でのみ、PC向けデザインの最小幅をviewportの最小幅に設定 -->
<script>
(function(){
var ua = navigator.userAgent
var sp = ua.indexOf('iPhone') > -1 ||
(ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
var tab = !sp && (
ua.indexOf('iPad') > -1 ||
(ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
ua.indexOf('Android') > -1
)
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から卒業して、シェア減少に貢献しようかと思います」と書きましたが、ごめんなさい、まだ卒業できておりません……。このサイズ、好きなんだよなあ。
ではまた! つっちーでした。