スマートフォンの表示対応は難しいです

先日、iPhoneSEで制作したウェブサイトをチェックしていた時に、表示ズレを発見しました。

「おかしいなー、なんではみ出ているんだ？」と不思議に思っていましたが、原因は横幅が320pxだと表示ズレが起こることでした。

てっきり横幅320pxは、iPhone4までだと思っていました。完全な勘違いです。iPhone5とiPhoneSEも横幅が320pxでした。Andoroidでこのサイズはもう無いと思います。

うわー、いつから勘違いしていたんだろ？納品したウェブサイトあるよね？と反省しましたが、特に指摘されたことはなかったので、まあ大丈夫でしょう。

さて、このスマートフォンの表示対応ですが、調べてみると、気になったことがわかりました。

画像解像度という高品質かつ面倒なものがあり、単純に横幅を計算すればいい訳では無いとのことです。実際のiPhoneは解像度2倍なので、横幅が320pxのiPhone5は640pxとなります。Andoroidは解像度が3倍なので、横幅が360pxの端末だと1080pxになるとのことです。

なんか訳がわからなくなりした。スマートフォンの表示は難しいですね。一度、キチンと勉強しないといけないです。