スマホ縦横回転時のWeb表示はviewport設定で結構変わる
公開日：
こんにちは。x-fit開発チームの山本です。
スマートフォン向けのWebサイトでは、viewportを指定することが多いと思います。このviewport、おまじないとして書いてはいるけれど、具体的に何がどうなっているのか、という部分について良くわからず使っている方もいらっしゃるかもしれません。このviewport設定、スマートフォンを回転させたときの表示に少なからず影響していますので確認してみました。
そもそもviewportとは
viewportは、iOSのSafariで最初に実装された、ブラウザの仮想的なウィンドウサイズを表す概念のことです。viewportを指定することで、画面の縦横長、解像度を気にせず、表示の大きさをコントロールすることができるようになります。viewportは、現在ではAndroidでも実装されており、スマートフォン向けのWebサイトでは、だいたい設定されていると言っていいでしょう。viewportそのものの詳細は、「iPhone生活」のページが、非常に良い解説になっていると思います。
スマートフォン回転時のサイト表示
スマートフォンを縦横に回転させたとき、どのようにサイトを表示するかはOSによって基本的な動作が異なっています。
iPhoneの基本的な動作
iPhoneでは、縦横回転時に、それまで見えていたコンテンツの画面表示範囲を変えないように回転します。縦横では当然長さが違いますので、縦持ちから横持ちにすると、縦持ちの幅を横持ちの幅で表現するよう画面全体が拡大し、文字や画像コンテンツが大きくなります。横持ちから縦持ちにすると、同様に画面全体が縮小します。
上記の画像では、縦持ちのときに横幅320pxで見えているものを横持ちにすると、画面の幅が480pxに変わったにもかかわらず、480pxの長さに合わせて320pxを拡大表示しています。
Androidの基本的な動作
Androidでは、縦横回転時に、それまでに見えていたコンテンツの大きさを変えないように回転します。したがって縦持ちから横持ちにすると、表示できる幅が広がって、それまで見えていなかった範囲が見えるようになります。横持ちから縦持ちにすると同様に見える範囲が小さくなります。
上記の画像では、縦持ちのときに横幅360pxで見えているものを横持ちにすると、画面の幅が700pxに代わり、コンテンツをそのまま横幅700pxで見せています。そのため、文字や画像の大きさは変わりません。
この動作の違いがviewportの設定によってどのように変化するかを見てみます。コンテンツの前提条件は下記のようにします。
- 単純なpタグで囲ったテキストのリキッドコンテンツ。
- 背景は160px*160pxの画像を使用。
変化させるのは、以下の項目です。それ以外は、width=device-widthのみを設定しました。
initial-scale属性
画面表示時の初期倍率を指定します。ここでは、この設定値を1.0として、その設定の有無で動作を確認します。
user-scallable属性とinitial-scale属性の同時設定
ユーザによる、手動の拡大・縮小を認めるかどうかを指定します。通常、これをnoに指定すると、拡大・縮小はできなくなります。noに設定した状態で、initial-scale属性をつけたときの動作を確認します。
maximum-scale属性
画面の拡大倍率の最大値を指定します。ここではこの設定値を1.0として、その設定の有無で動作を確認します。
確認結果
動作については、以下のパターンの挙動を示しました。
A:表示範囲は変わらない（コンテンツが自動で拡大・縮小する）、コンテンツの幅は画面幅に合わせて変わる（テキストの改行位置が変わる。見えていない部分は横スクロールか、縮小することで見える）
B:表示範囲は変わらない（コンテンツが自動で拡大・縮小する）、コンテンツの幅も変わらない（テキストの改行位置は変わらず、見えていない部分もない）
C:表示範囲は常に画面幅に合わせて変わる。コンテンツの表示の大きさは変わらない。
D:表示範囲は画面幅に合わせて変わり、コンテンツの表示の大きさも拡大・縮小される。
initial-scale属性
initial-scaleあり
| 機種 | OS・Version | パターン |
|---|---|---|
| iPhone 4 | iOS 4.0 | A |
| GALAXY NEXUS | Android_4.0 | C |
| IS12T | Windows Phone ７ | D |
initial-scaleなし
| 機種 | OS・Version | パターン |
|---|---|---|
| iPhone 4 | iOS 4.0 | B |
| GALAXY NEXUS | Android_4.0 | C |
| IS12T | Windows Phone ７ | D |
user-scallable=noかつinitial-scaleあり
| 機種 | OS・Version | パターン |
|---|---|---|
| iPhone 4 | iOS 4.0 | A※1 |
| GALAXY NEXUS | Android_4.0 | C※2 |
| IS12T | Windows Phone ７ | D※2 |
※1：見えていない部分は横スクロールで見える。ピンチが効かなくなっているので、縮小して全体をみることはできない
※2：拡大・縮小はできた。
maximum-scaleあり
| 機種 | OS・Version | パターン |
|---|---|---|
| iPhone 4 | iOS 4.0 | C※1 |
| GALAXY NEXUS | Android_4.0 | C※1 |
| IS12T | Windows Phone ７ | C※1 |
※1：表示範囲は常に画面幅に合わせて変わる。コンテンツの表示の大きさは変わらない。拡大・縮小はできない。
結局どう設定すればよいのか？
これまでみてきたとおり、viewportの指定できる属性の一部であっても、指定通りの動作がされないことはあるようです。とくにWindows Phoneは、独自路線を突っ走っているような印象ですね。今回確認された挙動を実際に体験すると、以下のように印象を持ちました。
拡大・縮小の挙動
iPhoneとWindows Phoneで起こっている拡大・縮小の挙動ですが、拡大が発生すると、画像がぼやっと眠たくなるような見え方になりました。縦横の持ち方に合わせて、CSSで背景画像を切り替える、というのも手法として考えられると思いますが、縦横の判定も簡単ではないので注意が必要です。
コンテンツの表示範囲
今回のようなリキッドコンテンツの場合、上記のAやCのような挙動を示すと、テキストの改行位置が変わってしまうため、読んでいる途中で回転すると、読んでいる位置を見失いやすくなります。また、上記のAの状態でuser-scallable=noが合わせて設定されていると、iPhoneの場合、見えない部分があるのに、ピンチで全体表示できず、スワイプでスクロールしないと読み進められない、というのもユーザ体験としては良くありません。
コンテンツがリキッドで、まったく幅を気にしなくてよいのであれば、maximun-scaleをつける、ということになるのでしょうが、画像などを使用してコンテンツの幅を意識する、レイアウトで絶対配置を使いたい、JS・CSSでアニメーションを、となると、それぞれの挙動の見え方のトレードオフを考えて決める、ということになるのだろうと思います。いずれにせよ、どのような見え方、体験としての印象になるのかは実際に試してみることをお勧めします。
Tweet
