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

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

つっちー

つっちー

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

以前の記事で、iPhone SEなど幅320px表示端末での縮小表示に便利なViewport Extraを紹介しました。

Viewport Extra

おかげさまで、CDNに対して1日約20,000回、公開以来約1,430,000回ものリクエストをいただいております! たくさんのページでご利用いただいているようで嬉しいです。ありがとうございます!

(2021/2/19 3:00 追記)
なんと、CDNへの総リクエスト数が 150,000,000回(1.5億回)を突破しました! ありがとうございます!

このライブラリ、実はiPadなどタブレット端末での縮小表示にも使うことができます。

さっそくですが、実例とともに紹介していきましょう。

たとえばこんなとき

  • レスポンシブデザイン
  • タブレットでは、デスクトップ向けデザインを表示したい
  • デスクトップ向けデザインの最小幅が、一部のタブレットの表示幅(768pxなど)より大きい
@media (min-width: 768px) {
    body {
        min-width: 1024px;
    }
}

iPadでの表示

768pxを超えた分の256pxだけ、横スクロールが発生してしまっています。

Viewport Extraで解決

(2021/2/19 3:00 v1からv2の内容へ変更しました)

Recipes

そんなときは、Viewport Extraを使って、タブレット端末でのみ、viewportに最小幅を設定しましょう。

CDNを利用する場合

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>
<script
    src="https://cdn.jsdelivr.net/npm/viewport-extra@2.0.1/dist/iife/viewport-extra.min.js"
    defer
></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // タブレット端末かどうかを判定
    var ua = navigator.userAgent
    var isSmartPhone = ua.indexOf('iPhone') > -1 ||
        (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
    var isTablet = !isSmartPhone && (
        ua.indexOf('iPad') > -1 ||
        (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
        ua.indexOf('Android') > -1
    )
    // タブレット端末でのみ最小幅を設定
    if (isTablet) ViewportExtra.setContent({ minWidth: 1024 })
})
</script>

デスクトップ向けデザイン全体が、タブレットの画面幅にピッタリ収まり、横スクロールが発生しなくなりました!

前回とは違い、タブレット端末かどうかを判定したあとに、setContentメソッドを使って最小幅を設定しています。setContentメソッドを使用する場合、metaタグへの設定は不要です。scriptタグのdefer属性DOMContentLoadedイベントは、最小幅設定がViewport Extra取得完了後に行われることを保証しています。

また、スマートフォン向けの最小幅設定と併用することも可能です。

<script>
document.addEventListener('DOMContentLoaded', function() {
    var ua = navigator.userAgent
    // ~ 省略(上の例と同じコードが入ります) ~
    // タブレットの場合: デスクトップ向けデザインの最小幅
    // タブレットでない場合: スマートフォン向けデザインの最小幅
    ViewportExtra.setContent({ minWidth: isTablet ? 1024 : 375 })
})
</script>

npmでインストールする場合

npm i viewport-extra

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>
import { setContent } from 'viewport-extra'

// タブレット端末かどうかを判定
const ua = navigator.userAgent
const isSmartPhone = ua.indexOf('iPhone') > -1 ||
    (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
const isTablet = !isSmartPhone && (
    ua.indexOf('iPad') > -1 ||
    (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
    ua.indexOf('Android') > -1
)
// タブレット端末でのみ最小幅を設定
if (isTablet) setContent({ minWidth: 1024 })

import文によって、setContentメソッドを取得しています。

CDNを利用する場合と同じく、スマートフォン向けの最小幅設定と併用することも可能です。

import { setContent } from 'viewport-extra'

const ua = navigator.userAgent
// ~ 省略(上の例と同じコードが入ります) ~
// タブレットの場合: デスクトップ向けデザインの最小幅
// タブレットでない場合: スマートフォン向けデザインの最小幅
setContent({ minWidth: isTablet ? 1024 : 375 })

注意点

(2021/2/19 3:00 v1からv2の内容へ変更しました)

Note

  • 上の例ではmin-widthのみ設定していますが、max-widthの設定、あるいは両方の設定も可能です。
  • v2でも、v1と同じ記法が利用できます。
  • v2では、RequireJS(AMD)非対応となりました。

まとめ

前回のまとめで、「私もいい加減、iPhone 5sから卒業して、シェア減少に貢献しようかと思います」と書きましたが、ごめんなさい、まだ卒業できておりません……。このサイズ、好きなんだよなあ。

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

つっちー
つっちー フロントエンドエンジニア / 土屋 大輔

フロントエンドエンジニアのつっちーです。 作曲してたらエンジニアになってました。 地図が好きで、一日中眺めていられます。 推しマップは路線地図。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL