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

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

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に一旦決定しました！

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