iPadにPC向けデザインを縮小表示するときにも！Viewport Extraで手軽に縮小表示[2]

つっちー

投稿日: 2019.06.06

更新日: 2020.04.09

Web制作フロントエンド

こんにちは。フロントエンドエンジニアのつっちーです。

以前の記事で、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;
  }
}

iPadでの表示

タブレット表示幅が、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）