レスポンシブデザイン、メディアクエリの設定について

質問

現在レスポンシブにしているサイトでは480、768、960、でメディアクエリの設定をしています。自分のIPhone4sの実機と各種エミュレータ、シミュレーターと検証したのですが、Xperiaの友人の実機で意図したレイアウトと違っていました。
機種名を聞いて仕様を見ると、解像度（ドット数）*4 HD:1280×720となっています。これは単純にwidth1280pxでの表示になるということなのでしょうか？それとも4で割って320pxという意味でしょうか？
わたしは後者の表示になると思っていたのですが、ワンカラムの設定が二カラムに表示されていて、根本の理解について確認させていただければと思いました。
どうぞ宜しくお願いいたします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

解像度と表示サイズがイコールになるかどうかは機種依存です。

横解像度をdevicePixelRatioで割った数が仮想的なスクリーン幅（viewport width、device-width）です。

回答No.2

ORUKA1951

＞4で割って320pxという意味でしょうか？
　この4の根拠がわからない・・
*1 ・・・・
*2 ・・・・
*3 ・・・・
*4 HD:1280×720 ピクセルと言う意味じゃないのですか。

レスポンシブデザインの前段階で、リキッドがあると思いますが？？？
そんなに小刻みに指定なんかしません。
例えば
　640px（ディスプレイサイズのpx数）以上の幅と、それ以下で分ける。
　640幅以上だと、最大幅1000px以下なら100% それを越えると1000pxで中央
　640以下だとデザインを変更する。
　　いずれも当然、リキッド
　スマホなど高解像度デバイスの場合は、Viewportの指定をしないと、文字が小さくなって読取れなくなります。
　 Viewportの指定がwidth=device-widthでしたら、実寸例えば480とかになります。

　解像度と、スタイルシートで言う単位のpxをきちんと区別しないとわけが分からなくなります。

　またフィーチャーホン(携帯電話用　media="handheld"のスタイルシートも用意すると良いです。

お礼

回答有り難うございます。
わたしは基本960pxで作成するのですが、960以上は固定にしています。
それ以上のサイズ（無限の）リキッドは好きではないからです。
それと、指定が一つでないのは、例えば３カラムから２カラム、そこから１カラムなどがあるからです。