iOS8 on iPhone6 で設定によって viewport の値が変わる件

これはさすがに書いておいた方がよいかと思ったので書いておきます。

結論だけ先に言うと、設定によって viewport の値が変わるので注意です。

設定によって viewport の値が変わる件

2014年の9月に iPhone6, iPhone6 Plus がそれぞれ発売されたわけですが、 購入して初期設定してるときに気になる画面が。

へぇーー。初期設定の際に画面全体を標準サイズにするか、拡大サイズにするかを選択できるようになってました。

また、初期設定後であっても、設定 > 画面表示と明るさ > 画面表示の拡大 という項目で自由に変更できるようになっています。

プレビュー画面も用意されているので分かりやすいです。こちらが標準設定。

以下が拡大設定です。

比率は一定で横幅柔軟にしましょう

端末はデカくなったのですが、今までの考え方に沿うのであれば、マルチデバイスであっても比率は一定で横幅（or 高さ）を柔軟に考えていきましょうという意味での device-width（or device-height） なので、画面がデカくなれば横幅が増えるはずです。

実際今回もその通りになっていて、iPhone6 の viewport は、device-width = 375(px), device-height = 559(px) です。

上のキャプチャを見てもらえれば分かるように、ボタンのサイズ感はそのままなので、以前のものと同じような押しやすさになっており、ボタン間の余白が調整されています。

正直ここまでは予想通りだったかと思います。いまどき 320px の幅固定で作っちゃってる人は、まあ当然異なるスクリーンサイズが出て来ちゃったらはまるよねー、という感じで、device-width が異なるものが出てくるのは、もう既定路線というか、想定の範囲内だったと思います。

そこで颯爽と登場した『画面表示の拡大』設定

この拡大設定にしたときに、Safari で見たらどうなるんだろうとふと思ったのですが、比率が異なっているのであれば、逆に viewport の設定も変化しているのでは？と思い、それぞれ見比べてみました。

以下が通常設定時。

対して、こちらが拡大設定時。

ご覧の通り、この設定によって拡大率が変わってくるので、viewport の値も変わってきます。（余談ですが、device-width が小さくなっているのと同様に、キャプチャサイズも小さくなってました）

で、少し問題になってくるのが、初期設定のこの画面です。

必ずどちらかユーザーが選択するようになっています。

IE のズーム機能との違い

IE では、何もしなくてもズーム機能の値が標準になっているので、特に設定をいじらなければ標準のままですが、iPhone6 からは初期設定時に必ずユーザーが選択する必要があります。（というのをキャプチャ見せながら書くために再度出荷時にまで戻してキャプチャ取りました・・・）

IE のズーム機能の対応は、おそらくやる場合とやらない場合が出て来たかと思います。通例などは知りませんが、一例として、『何も触らなければ標準なんだし、標準の設定の場合だけサポートしますね』というのはよくある謳い文句かと思います。

ただ、今回のケースはそれとは異なり、必ずユーザーがどちらか選ばないといけません。 年配の方であれば、他の年代よりも拡大表示を選ぶ可能性が高くなるのではないでしょうか？

同じ端末なのに異なる viewport で閲覧するケースが出てくる

横幅（高さ）固定のレイアウトで作っていなくても、例えば CSS の Media Queries を用いてスタイルの切り替えを行っていたり、window.matchMedia を用いて特定のスクリーンサイズのみ動作する処理を用意していたりする場合、こちらの設定によって動作する／しない、表示される／されない、といったケースが考えられます。

例えば、作ったものをクライアントに確認出ししているときに、今3カラムになってるんだけど4カラムに直してよ、と言われても、こちらの端末にはもうすでに4カラムになっていて直しようがない、とか。

まだ目に見える範囲であれば、キャプチャとってもらって確認すれば、『ひょっとして・・・』と気づくかもしれませんが、見た目に見えないところだと気づかない可能性もありますね。

まとめ

『比率は一定で横幅を柔軟に作る』というのは大前提なのですが、 それとは別に iPhone6 以降では、拡大設定によって viewport が異なり、 同じ実機、同じブラウザでも、人によって見ているものが異なる可能性があるということを頭の片隅に入れておく必要があると思います。

今回の例は iPhone6 だけですが、まあ間違いなく iPhone6 Plus の方にも同様の問題があると思われます。（まだ実機手に入れてないので、もしお持ちの方は以下のページで報告いただけたら嬉しいです。）

• http://viewportsizes.com/mine/