いいオフィスが無料で使える!
いいオフィスが無料で使える!
2019.06.06
#192
それいけ!フロントエンド

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

つっちー

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

以前の記事で、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.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から卒業して、シェア減少に貢献しようかと思います」と書きましたが、ごめんなさい、まだ卒業できておりません……。このサイズ、好きなんだよなあ。

ではまた! つっちーでした。