2018年6月20日(水)
iPhone/iPadの解像度 #■パソコン・通信 スマホ用のWebページを作成するときに、スマホの解像度を熟知しておきたいものです。
デバイスの解像度は日々増しており、パソコンと同じようにピクセル単位で表現すると細かくなってしまいます。画面の大きさを考慮して、見やすいように換算したのがポイント単位です。
ポイント値 ＝ ピクセル値／Retina
つまり、機器的にはRetina倍細かく表示できるけど、Webページではポイント値で表現すると、適度な大きさになるということです。
--
スマホの画面解像度シェアを調べてみた（2018年1月版）
https://webseeya.com/2015/09/04/smartphone-display-share/Moblie Screen Resolution Stats Japan on Dec 2017
順位 ポイント 割合 iPhone?
1) 375 x 667 33.89% 6～8
2) 360 x 640 19.21%
3) 320 x 568 9.86% 5シリーズ
4) 414 x 736 9.27% 6+～8+
5) 1080 x1920 3.13%
6) 375 x 812 2.75% X
7) 720 x1280 1.55%
8) 412 x 732 0.66%
9) 360 x 592 0.63%
10) 640 x 360 0.43%
10位までの合計 81.38%
--
Mobileとあるので、スマホに加え、タブレットなども含んだ数値と考えられます。上位4位までスマホであり、72.23%を占めています。
タブレットは、ポイント値が大きいものがそうであり、1080x1920, 720x1280, 640x360が主流ですね。タブレットでは、解像度を変更できますので、640x360と大きくしている方も結構おられるということです。
スマホでは、幅320～414ポイント、高さ568～812ですね。なので、ガレコレでは、すべてのスマホでほぼ同じレイアウトで見てもらいたいときには、幅400ポイントに設定します。
現在開発中のごめん・奈半利線の時刻表（見出し固定版）も幅400ポイントです。幅320で80%、幅360で90%、幅375で93.75%、幅414で103.5%で表示されますので、許容範囲と考えています。
--
<meta name="viewport" content="width=400px">
--
iPhoneの解像度を見てみましょう。
--
The Ultimate Guide To iPhone Resolutions
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions375 x 812 iPhone X
414 x 736 iPhone 6+, 6s+, 7+, 8+
375 x 667 iPhone 6, 6s, 7, 8
320 x 568 iPhone 5, 5s, 5c, SE
320 x 480 iPhone 4, 4s, 3G, 3GS, 2G
--
統計からみると、iPhone 4以下は死滅していますね。
iPadシリーズのポイント解像度は、３種類です。
--
1024 x 1366
iPad Pro 12.9
834 x 1112
iPad Pro 10.5
768 x 1024
iPad Pro 9.7
iPad Air 2, Air
iPad 4, 3, 2
iPad
iPad Mini 4, 3, 2
iPad Mini
--
統計からみると、iPadシリーズはあまり使われていないようです。iPad Proは、てっきり1080x1920だと思っていましたが、これじゃ次期iPadを待ちますよね。
お問い合わせ