カテゴリー

キーワード

 
> 【CSS】スマホ、タブレットの...

【CSS】スマホ、タブレットの横幅(端末解像度と実質解像度)


2016 年 3 月 25 日 投稿    view: 80012
タグ:
このエントリーをはてなブックマークに追加

スマホ、タブレット横幅

 

こんにちは、ウェブマーケティング部の杉尾です。

 

かなり時間が空いてしまいましたが、前回、CSS3のメディアクエリについてお話しさせていただきました。

それに関係する話で、スマホとタブレットの横幅(端末解像度、実質解像度)を紹介したいと思います。

制作の参考にしてください。

 

【前回はコチラ】
http://scene-live.com/page.php?page=95

 

スマートフォンの端末解像度と実質解像度

iPhoneとAndroidに分けてお伝えします。

 

iPhone

 

デバイス 端末解像度(横×縦)
実質解像度(横×縦)
画素(ppi) Device Pixel Ratio
iPhone 2G,3G 320px × 480px
320px × 480px
163 ppi 1.0
iPhone 3GS 320px × 480px
320px × 480px
163 ppi 1.0
iPhone 4 640px × 960px
320px × 480px
326 ppi 2.0
iPhone 4S 640px × 960px
320px × 480px
326 ppi 2.0
iPhone 5 640px × 1,136px
320px × 568px
326 ppi 2.0
iPhone 5C 640px × 1,136px
320px × 568px
326 ppi 2.0
iPhone 5S 640px × 1,136px
320px × 568px
326 ppi 2.0
iPhone 6 750px × 1,334px
375px × 667px
326 ppi 2.0
iPhone 6 Plus 1,080px × 1,920px
414px × 736px(※)
401 ppi 3.0
iPhone 6S 750px × 1,334px
375px × 667px
326 ppi 2.0
iPhone 6S Plus 1,080px × 1,920px
414px × 736px(※)
401 ppi 3.0

 

iPhone 6 Plus / iPhone 6S Plus だけ実質解像度を、端末解像度 ÷ Device Pixel Ratio × 1.15で計算します。

 

Android

 

アンドロイドはほとんどのものが、横幅360px(実質解像度)でした。

ですので、最近の代表的な端末と、横幅410px(実質解像度)だったNexus 5X、Nexus 6Pを記載しておきます。

 

デバイス 端末解像度(横×縦)
実質解像度(横×縦)
画素(ppi) Device Pixel Ratio
AQUOS ZETA SH-04F 1,080px × 1,920px
360px × 640px
408ppi 3.0
GALAXY S5 SC-04F 1,080px × 1,920px
360px × 640px
432ppi 3.0
Xperia Z2 SO-03F 1,080px × 1,920px
360px × 640px
424 ppi 3.0
Xperia Z3 SOL26 1,080px × 1,920px
360px × 640px
424 ppi 3.0
AQUOS ZETA SH-03G 1,080px × 1,920px
360px × 640px
401 ppi 3.0
Xperia Z3 Compact SO-02G 1,080px × 1,920px
360px × 640px
319 ppi 3.0
Xperia Z4 SO-03G 1,080px × 1,920px
360px × 640px
480ppi 3.0
Xperia Z5 Premium SO-03H 2,160px × 3,840px
360px × 640px
801ppi 6.0
Nexus 5X 1,080px × 1,920px
410px × 730px
423ppi -
Nexus 6P 1440px × 2560px
410px × 730px
518 ppi -

 

 

タブレットの端末解像度と実質解像度

こちらも、iPhoneとAndroidに分けてお伝えします。

 

iPad

 

デバイス 端末解像度(横×縦)
実質解像度(横×縦)
画素(ppi) Device Pixel Ratio
iPad 768px × 1,024px
768px × 1,024px
132 ppi 1.0
iPad 2 768px × 1,024px
768px × 1,024px
132 ppi 1.0
iPad(第3世代) 1,536px × 2,048px
768px × 1,024px
264 ppi 2.0
iPad(第4世代) 1,536px × 2,048px
768px × 1,024px
264 ppi 2.0
iPad Air 1,536px × 2,048px
768px × 1,024px
264 ppi 2.0
iPad Air 2 1,536px × 2,048px
768px × 1,024px
264 ppi 2.0
iPad mini 768px × 1,024px
768px × 1,024px
163 ppi 1.0
iPad mini 2 768px × 1,024px
768px × 1,024px
163 ppi 1.0
iPad mini 3 1,536px × 2,048px
768px × 1,024px
326 ppi 2.0
iPad mini 4 1,536px × 2,048px
768px × 1,024px
326 ppi 2.0
iPad Pro 2,048px × 2,732px
1,024px × 1,366px
264 ppi 2.0
iPad Pro (9.7inch) 1536px × 2048px
768px × 1,024px
264ppi 2.0

 

Android タブレット

 

デバイス 端末解像度(横×縦)
実質解像度(横×縦)
画素(ppi) Device Pixel Ratio
Nexus 7(2013) 1200px × 1920px
600px × 960px
323ppi 2.0
Nexus 10 1600px × 2560px
800px × 1280px
300ppi 2.0
Nexus 9 1536px × 2048px
768px × 1024px
288ppi 2.0

 

以上です。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事