モバイル端末の画面サイズまとめ

mobile-design-device-size

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。

基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。

最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機会も増え、スマートフォンやタブレットに合わせたデザインが必要になってきています。

そこで、スマートフォンやタブレットなどのモバイル端末の画面サイズをまとめてみました。

モバイル端末の解像度

解像度 端末
240×400
  • docomo F-05B
320×480
  • iphone
480×854
  • docomo N-01F
  • docomo P-01F
  • docomo SH-03E
  • docomo F-10B
  • docomo N-07E
540×960
  • docomo F-04F
  • MOTOROLA RAZR(TM) IS12M
640×960
  • iPhone4
720×1280
  • docomo XperiaTM Z1 f SO-02F
  • au DIGNO(R) S KYL21
  • au ARROWS ef FJL21
  • au AQUOS PHONE SERIE SHL21
  • au Xperia(TM) VL SOL21
  • au INFOBAR A02
  • au URBANO L01
  • au AQUOS PHONE SERIE SHL22
640×1136
  • iphone5s,iphone5c
1080×1920
  • docomo AQUOS PHONE ZETA SH-01F
  • docomo ARROWS NX F-01F
  • au Xperia(TM) UL SOL22
  • au HTC J One HTL22
  • au DIGNO(R) M KYL22
  • au ARROWS Z FJL22
  • au AQUOS PHONE SERIE SHL23
  • au GALAXY Note 3 SCL22
  • au Xperia(TM) Z1 SOL23
  • au isai LGL22

キャリアから販売されている主な機種の解像度のスペックをまとめてみました。

見てみると最新(2013年12月まで)の機種で「1080×1920」、デスクトップの大きさと同等ですね・・・。

端末ごとにこれだけ差があると、端末に応じてデザインをするのは途方に暮れてしまいそうです。

スマートフォン向けのWEBサイトの制作

実際の問題として、これだけ画面サイズが異なる端末に合わせてデザインを行うのは効率的ではないです。サイズの違いだけで10種類以上もバリエーションが必要になってしまいます・・・。

そこでスマートフォン向けにメタ情報として「viewport」という表示領域を設定する機能が用意してあります。

サンプルコード

/* 固定タイプ */
<meta name="viewport" content="width=320, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

/* 汎用タイプ */
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

固定タイプの記述では「width=320」を設定しています。この場合、スマートフォンで表示する場合のコンテンツの横幅は「320px」となります。

汎用タイプの記述では「width=device-width」を設定して、「device-width」とはその端末が持つ横幅に合わせるということになります。

この「device-width」は、端末の解像度なのか?というと、標準サイズとしてiPhone端末では「320px」、Android端末では「360px」が設定されているようです。※端末内のOSのバージョンによっては動作が異なります。

スマートフォンの横幅に関しては、「320px」または「360px」を基準にレイアウトをすればよさそうです。

高解像度端末の画像表示について

「viewport」を設定すれば、見た目の上では、高解像度のスマートフォン端末でも、古いタイプのスマートフォン端末と同じように横幅は「320px」または「360px」のサイズで表示されるようになりますが、画像を使う場合は注意が必要です。

実際に横幅が640pxの画面に320pxのコンテンツを表示するのは、コンテンツを2倍にして拡大表示していることになります。

1px×1pxの画像を単純に画面内に設置すると、この画像は4px×4pxに拡大表示されることになります。

そのため、横幅が「320px」以下の小さい画像は、拡大表示されるため輪郭がぼやけてみえます。

このようなスマートフォン特有の表示環境も考慮してデザインにも注意しておかないといけませんね。

関連記事

【フォト】皆既月食「スーパー・ブルー・ブラッドムーン」

みなさんは皆既月食ご覧になりましたか? 2018年1月31日の満月は「スーパームーン」として、普段みることができる月よりも大きく光り輝く月をみることができます。さらに、満月が1カ月に2回見られる「ブルームーン」であり、皆既月食のときにみられる「ブラッドムーン」という、月に関する...続きを読む

2018.01.31フォトギャラリー

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06HTMLコーディング

【ソーシャルメディア】ソーシャルマーケティングの重要性

facebookやtwitter、Googoleプラスやyoutubeなどのソーシャルメディアをビジネスとしてマーケティングに取り込む動向が続いています。現在、ブロガーや中小企業の約75%が現在、などのTwitterやFacebook、LinkedInのようなソーシャルメディ...続きを読む

2015.02.17WEB

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー