iPad対応のWebデザイン必見！viewport-extra.jsで最小幅設定する簡単ステップ｜DAD UNION

Web開発の小技をお届けします。特に、iPadユーザーに向けたサイトの最適化についてです。なぜこれが重要かというと、iPadの普及率は年々増加しており、多くのユーザーがiPadでWebサイトを閲覧しています。したがって、彼らに最適なブラウジング体験を提供することが重要になってきます。

今回はviewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定する方法をご紹介します。

Contents

iPad用ビューポート設定の重要性
CSSによるビューポート設定
HTMLによる補足設定
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するJavaScriptの記述
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ
ソース元：Viewport Extraで手軽に縮小表示
まとめ

iPad用ビューポート設定の重要性

iPadでWebサイトを閲覧する際、一般的なスマートフォンと異なり、画面サイズが大きいため、表示が小さくなりがちです。この問題を解決するために、iPad専用のビューポート設定を行います。ここでは、iPadアクセス時だけビューポートの最小幅を設定するCSSの書き方を紹介します。

CSSによるビューポート設定

まずは、iPadでアクセスしたときのみ、ビューポートの最小幅を設定するCSSのコードについて解説します。ここでは、ブラウザ幅が768px（iPadサイズ）の場合、bodyタグにmin-width: 1000pxを適用する方法を取ります。この設定により、iPadでの閲覧時にページが小さく表示されるのを防ぎます。

<style type="text/css">
body{
    text-align: center;
    margin: 0;
    padding: 0;
}
h1{
  text-align: center;
  font-size: 32px;
  padding: 20px 0;
  line-height: 1.4em;
}
.wrap {
    background-color: #cccccc;
}
@media (min-width: 768px) {
    body {
        min-width: 1000px;
    }
}
</style>

HTMLによる補足設定

HTMLの記述方法をご紹介します。ここで重要なのは、デフォルトのビューポート設定を行います。
デフォルトのviewportはmetaタグに設定します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

※以下は必要に応じて変更して下さい。

<div class="wrap">
<h1>iPadでアクセスした時だけviewportの最小幅(width)を設定する方法</h1>
</div>

viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するJavaScriptの記述

次に、JavaScriptを用いた設定方法をご紹介します。metaタグに設定したデフォルトのビューポート設定をJavaScriptで拡張することです。viewport-extra.jsというライブラリを使用し、iPadでのアクセスを検出し、必要に応じてビューポート設定をカスタマイズします。

viewport-extra.min.jsファイルを読み込みます。ページにアクセスした端末がiPad（タブレット）端末かどうかを判定しiPad（タブレット）端末の場合、ViewportExtra.setContent({ minWidth: 最小幅 })を設定します。

<script src="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: 1000 })
})
</script>