• ホーム
  • スマートフォン向けのサイトをデザインをするときの横幅は?

著者:Akiyoshi Takashima

公開日:

カテゴリー:

WEB制作

smp-img1

スマートフォン向けデザインの仕様を固めようと
各メーカーのスマートフォンを調査していたらこんな結果に・・・。

iPhone6
1,334 x 750ピクセル

iPhone6Plus
1,920 x 1,080ピクセル

Xperia A2
1,280 × 720ピクセル

Xperia Z2
1,920 x 1,080ピクセル

GALAXY S5
1,920 x 1,080ピクセル

え!?横幅が1,080ピクセルって・・・大きくないですか^^;
これでは画面サイズによってスマートフォン用に
デザインを切り変える事ができない!?
どうしよう!と思ったのですがこんな回答がありました。

スマートフォンは、ディスプレイデバイスの解像度とブラウザのviewportは別モノです。
実際にJavaScriptなどを使って確かめられたら分かると思いますが、ディスプレイデバイスの横幅が1080pxでもブラウザの横幅はそんなにありません。
– 引用「レスポンシブ 横1080px高解像度スマートフォン

ディスプレイデバイスの解像度と
ブラウザのviewpointとは違う!?
え!どういうこと?

「device-width」の値は「各デバイスの解像度 ÷ デバイスピクセル比」となっている。iPhone5 では「640px ÷ 2 = 320px」、iPhone3GSなどでは「320px ÷ 1 = 320px」となて、デバイスの解像度が異なっていてもデバイスピクセル比で調整され同じような表示領域で描画させることが可能で、viewport の幅(width)の値は、「device-width」が一般的に使用される。
– 引用「これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

なるほどね〜!
スケーリングさせていたんですね。
納得です。

考えてみれば画面の大きさが
物理的に小さいのに
原寸大で表示されるわけないか^^;

いやいや、とても勉強になりました。

それで結局スマートフォン向けに
横幅はどれくらいにしたらいいのか。

と調べたのですが・・・
640pxがいいやら720pxがいいやらと
どうもパッと決まりません。

Twitter Boostrapの仕様をみると
768px(750px)以下たっだので・・・

スマートフォン向けのサイトを
デザインをするときの横幅は、
750pxに一旦決定しました!

あとは使いながら様子を見ていきます^^

 

Twitter でウェブ屋のアキさんをフォローしよう!

The following two tabs change content below.
Akiyoshi Takashima
ウェブサイトからの集客・反応率アップにつながる情報をお届けします。ウェブサイト制作やリニューアル、運営でのご相談はお問い合わせください。初心者の方でもわかりやすくご説明いたします。