JavaScript

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

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

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

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>

viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ

理論だけではなく、実際にどのように機能するかを見ていただくために、デモページを用意しました。以下のリンクからアクセスし、iPadと他のデバイスでの表示の違いを体感してください。

viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ

ソース元:Viewport Extraで手軽に縮小表示

この技術の詳細な情報については、以下を参考にしました。このサイトでは、ビューポートのカスタマイズに関するさらに深い情報を得ることができます。

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

まとめ

iPadユーザーに最適化されたWebサイトを提供することは、ユーザー満足度を高めるために非常に重要です。今回紹介した技術を活用して、訪問者に快適なブラウジング体験を提供しましょう。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。