MEMORVA

スマートフォンの画面サイズに合わせてページを表示する - viewport

更新：2020-03-27

パソコンや携帯電話用のサイトをiPhone、Androidスマートフォンに対応させるタグ。

スマートフォンの画面サイズ

スマートフォンの画面サイズはパソコンと同様 JavaScript で取得できる。 

<script>
document.write("screen.width " + screen.width + "、" + "screen.height " + screen.height);
</script>

横幅は screen.width、縦幅は screen.height。 iPhone 4S や iPod touch（第2世代）の Safari では screen.width = 320、screen.height = 480 と表示される。 ただ、横幅320ピクセルとなっているが、特に指定がなければページ自体は横幅 980 ピクセルとして表示される。 よって、横幅 320 ピクセルのページを作ってもページが小さく表示されてしまう。 同様に、width を特に指定していないフィーチャーフォン（ガラケー）向けサイトは、スマートフォンで見ると文字が小さく表示され見にくい場合がある。

また、screen.width の値はブラウザの種類によって異なる場合がある。 Android 端末も機種やブラウザによって値はまちまち。

viewport - スマートフォンの画面に合わせる

スマートフォンの画面サイズに合わせてページを表示させる便利なタグがある。 

<html>
<head>

<meta name="viewport"
   content="width=320,
      height=480,
      initial-scale=1.0,
      minimum-scale=1.0,
      maximum-scale=2.0,
      user-scalable=yes" />

</head>

この meta タグ（viewport）を HTML の <head> 内に書くだけで良い。 ただし、ページ内にある <div> などに width=800 など大きい横幅が指定してあると綺麗にフィットして表示されないので、基本的にページは width に数値を指定しないで作る。

width が必要な場合は、viewport を使って表示した画面の横幅に収まる小さい値にするか、%で指定するか、max-width などを利用して端末の画面の幅に合うようにする。 viewport の方で width を指定する方法もあるが、どうやってサイトを作るかは好みによる。

2017年現在、横幅の目安としては 320px が最低ラインで、400px 前後で表示される機種が増えつつある。

viewport における各属性の指定は以下のようになっている。

  • width
    表示領域の横幅をピクセルで指定。 デフォルトは 980。 指定可能範囲は 200 ～ 10,000。 device-width という値を設定可能。
  • height
    表示領域の縦幅をピクセルで指定。 デフォルトはwidthとアスペクト比から算出される。 指定可能範囲は 223 ～ 10,000。 device-height という値を設定可能。
  • initial-scale
    表示倍率の初期値。 デフォルトは表示領域内のページに合わせて計算される。 minimum-scale ～ maximum-scale の間で設定可能。
  • minimum-scale
    表示倍率の最小値。 デフォルトは 0.25。 指定可能範囲は 0 ～ 10.0。
  • maximum-scale
    表示倍率の最大値。 デフォルトは 5.0。 指定可能範囲は 0 ～ 10.0。
  • user-scalable
    表示倍率の変更可否。 変更可能は yes、変更不可は no。 デフォルトは yes。
  • shrink-to-fit
    縮小して全体を表示する。 yes と no がある。 仕様には存在しないが、機能する。 もともと、iOS 9.0のSafariにて、ページをいったん縮小してから画面に合わせて表示する不具合を回避するために使用された。 ただし、iOS 9.1で修正されたため、現在は不要。 Android端末で閲覧しても特に問題はない。

このタグ（要素）は iPhone/iPod touch だけでなく、Android スマホでも使える。 iOS 1.0 以降、Android 2.0 以降対応。 device-width、device-height は、iOS 1.1.1以降、Android 2.0 以降対応。 device-width、device-height を指定すると、自動的に端末の画面サイズに合わせてページが表示されるようになるので便利。

width や height など各属性はカンマで区切って書く。 属性を指定しない場合はデフォルト値になる。 user-scalable=yes だと、画面をピンチアウト・ピンチインしてズームイン・ズームアウトできる。

私のサイトは以下のタグ（meta要素）を追加した。 

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

この場合、画面の向きを縦から横に変えるとページの表示がフィットしない場合がある。 maximum-scale=1.0,user-scalable=no にしてこれを回避できるが、表示の大きさは変えられなくなる。

また、initial-scale=1.0 の代わりに maximum-scale=1.0 にするとピンチアウトでページを拡大できなくなるが、ブラウザによっては拡大できる。 2017年2月現在、Safari は拡大可能で、Chrome は拡大不可になる。

viewport については以下のサイトに詳しく書かれている。
Supported Meta Tags（Apple）
Configuring the Viewport（Apple）
Supporting Different Screens in Web Apps（Android Developers）

iPhone（iOS）のSafariで画面を横向きにした際に文字が拡大されてしまう件

viewport を指定してスマホの画面を縦から横向きに変えた場合、iPhone（iOS）の Safari では文字が拡大されてしまう。 文字が拡大されないようにするには body 要素などに CSS で -webkit-text-size-adjust:100% 等を指定しておく。 

body {
  -webkit-text-size-adjust: 100%;
}

レスポンシブデザインにするには

viewport さえ追加すればスマホに対応できるというわけではない。 まず、上述の通り width に気をつけてサイトを作る必要がある。 さらに、昨今流行りのレスポンシブデザインにするには viewport だけでは足りない。

「メディアクエリを使ったCSSの記述」と「画像のレスポンシブ化」を行うとかなりスマホで見やすくなる。 それらについては話が長くなるので レスポンシブデザインの仕組みと作り方、メディアクエリの書き方 と スマホの画面サイズに合わせて画像・写真を縮小・拡大表示するレスポンシブデザイン に書いた。

カテゴリ