【WEB制作】ビューポートの設定（iPhone pro Maxの時代編）
こんにちは。takeyemaです。
先日サイトを制作していたときに、お客様のiPhoneでレイアウトが崩れてしまう現象が起きて困ってしまいました。
iPhone pro MAXというこれまでにない大きな画面サイズのスマートフォンが出てきたため、画面サイズの設定を変更しなければいけなかったというお話。
この記事はWordPressの特定のテーマを使用した場合の内容になっています。
他の環境では異なる結果になる場合がありますので、予めご了承ください。
さて、以前「【WEB制作】スマホとPCでCSSを分ける」という記事で、おすすめのビューポートの設定を書きました。
今までその設定でやってきてたんですが、実は時代はとっくに変わってその設定では対応できなくなっていたことに気づいていなかったのです…。
それまで使っていた、CSSでの画面サイズの切り替えはこのようにしていました。
/*========●スマホ========*/
@media screen and (max-device-width: 414px){
/*ここにスマホ用のスタイルを書く*/
}
/*========●PC========*/
@media screen and (min-device-width: 415px){
/*ここにPC用のスタイルを書く*/
}
これでなんとなくうまく行っていたように見えていました。
chromeの開発ツールでもいろんなデバイスでうまく表示できてましたし。
しかしお客様から「自分のケイタイで表示がおかしい」と言われて調べてみました。
お客様が使用していたのはiPhone 13 pro MAX。
chromeの開発ツールには入っていないデバイスです。
これはいけない。chromeの開発ツールでは任意の画面サイズが指定できるので、iPhone 13 pro MAXの画面サイズを調べてそれに合わせた表示をしてみると、確かにレイアウトが崩れてしまっている。
今まで使っていたビューポートの分岐点ではiPhone pro MAXのサイズに対応できてなかったんですね。
あわててビューポートの設定をpro MAXに合わせたものに変更しました。
chromeの開発ツール上でしっかりきれいなレイアウトで表示されています。
お客様に確認をお願いすると… やはり崩れていると。
なんでえええええええ？？！！
正直手元に実機ないんで確かめようがなかったんですよ。
会社にpro MAX持ってる人いなかったし。←みっともない言い訳
慌てて他のモバイルシミュレーターを試してみたところ、おおお崩れてるやないか。
しかも大きめの数字を設定してもうまくいきません。
結局これまで自分が使っていた「max-device-width」「min-device-width」はやめて、「max-width」「min-width」にしたところ、pro MAXでもきれいに表示できるようになりました。
iPhone pro MAXに対応したCSSはこうです。
/*========●スマホ========*/
@media screen and (max-width: 428px){
/*ここにスマホ用のスタイルを書く*/
}
/*========●PC========*/
@media screen and (min-width: 429px){
/*ここにPC用のスタイルを書く*/
}
max-device-width、min-device-widthがなぜ13 pro MAXで効かないのか、それはよくわかりません。
（最近インフラ系の仕事以外は原因を追求しない姿勢になってきている自分がいます。）
とにかくちゃんと動作するようになったので良しとすることにした自分です。
なおWordPressでは、タブレットでもスマホレイアウト（メインメニューやフッターの表示方法など）で表示するテーマが多いようです。
スマホの画面が大きくなってきたため、スマホータブレットーPC の画面サイズが大分カブってしまうようになってきました。
どうサイズを切り分けていくかは、今後も研究していく必要がありそうです。
何かのお役に立てれば。
でわ。
