2019最新版:スマホ・タブレットの解像度一覧表(画面サイズの割合)

LINEで送る
Pocket

最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレイクポイントをどこにするか、画像サイズをどれくらいにするか変わってくるので、その都度メモをみたり調べたりしないでいいように、個人的に見やすい表にしてまとめました。主にデザイナーの方にとって見やすい表にしています。

スマホ・タブレットの解像度一覧表

下記の『画面の解像度(画面サイズ)の割合』に詳細は記載してますが、当方管理サイトでの『iOSの割合』は『74.48%』と、圧倒的に多いので、iOSをメインに一覧表を作りました。
Androidに関しては種類が多すぎるので、『画面の解像度(画面サイズ)の割合』で、Androidの中で一番多かった『XPERIA(2.46%)』のみを、現状参考までに記載しています。

iOS

iOS の解像度
端末(iPhone) サイズ(inch) CSSピクセル
(for コーディング)
デバイスピクセル
(for 画像作成)
5・5s・SE 4 320 x 568 640 x 1136
6・6s・7・8 4.7 375 x 667 750 x 1334
[6・6s・7・8] Plus 5.5 414 x 736 1080 x 1920
X・XS 5.8 375 x 812 1125 x 2436
XR 6.1 414 x 896 828 x 1792
XS Max 6.5 414 x 896 1242 x 2688
端末(iPad) サイズ(inch) CSSピクセル デバイスピクセル
mini 7.9 768 x 1024 768 x 1024
mini2・3・4 1536 x 2048
iPad・2 9.7 768 x 1024
iPad3・4・Air・2・Pro(9.7) 1536 x 2048
Pro(10.5) 10.5 834 x 1112 1668 x 2224
Pro(11) 11.0 834 x 1194 1668 x 2388
Pro(12.9) 12.9 1024 x 1366 2048 x 2732

Android

Android の解像度
端末 サイズ(inch) dp解像度
(for コーディング)
デバイスピクセル
(for 画像作成)
XPERIA 4.6 360 x 640 720 × 1280
5 1080 × 1920
5.2
5.5 2160 × 3840 (4K)

画面の解像度(画面サイズ)の割合

当方管理サイトで一番訪問者の多いサイトで、過去3ヶ月間(2018/2時点:2017/11〜2018/1)の画面の解像度(画面サイズ)の割合を、GA(Googleアナリティクス)で調べてみると、
全体に対する『スマホ・タブレットの割合』は『62.27%』で、その中でも『iOSの割合』は『74.48%』という結果となりました。(上位10位までを抜粋)

resolution-list_01

また、画面サイズの割合『iPhone6,6s,7,8 [375 × 667]』が『25.35%』と圧倒的に多く、次に『XPERIA [360 × 640]』が『2.46%』という結果となりました。(上位10位までを抜粋)

resolution-list_02

いやはや、Apple勢強しですね。。

ちなみに、このサイトはWEB関係の方からの訪問者が圧倒的に多いと思われるため、全体における『スマホ・タブレットの割合』は『7.45%』とかなり低く、『デスクトップの割合』が『92.56%』と、参考にならない数値でしたので、無視して一覧表を作りました。

resolution-list_03

まとめ

サイトの内容によって『スマホ・タブレットの割合』は変わってくるかと思いますが、当方の関わっていますECサイト(平均150,000view/month)などでも、やはり上記割合(当方管理サイトで一番訪問者の多いサイト)に近い数値でしたので、現状ではやはりiOSを基準に制作するのが妥当のようですね。



関連記事

日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


『WinSCP』をMacで使えるようにする方法!!


FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


Database Search and Replace Script in PHP

ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って


最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


アイキャッチ_RSSImport

WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

参考にさせていただいてるサイト

PAGE TOP