レスポンシブ 横1080px高解像度スマートフォン

質問

レスポンシブに挑戦しようとしていますが、
ちょっとよく分からくなってきたので質問させてください。

レスポンシブWEBデザインは、
例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。

　@media screen and (min-width: 769px){PC向け}
　@media screen and (max-width: 768px){タブレット向け}
　@media screen and (max-width: 640px){スマートフォン向け}

しかし、横幅が1080pxもあるスマートフォンが発売されてきましたので、
もはや、横幅ではどんなデバイスなのか分からなくなってきたと思います。

また、スマートフォンが高解像度になっても、
画面自体は小さいので、
スマートフォン用にサイトデザインを最適化する必要は変わりません。

そうすると、ユーザーエージェントで切り分ける旧式のやり方を少なくも併用しなければ、
結局、うまくいかないような気もするのですが、どうなんですかね？

そのあたりについて、どのようにお考えでしょうか？
ご意見お聞かせいただきたくお願い申し上げます。

回答No.1

t_ohta · ベストアンサー

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

お礼

ご回答ありがとうございます。

別モノなのですね。
私のGALAXY SIIIはディスプレイデバイスの横幅が720pxなのですが、screen.widthを使って調べたところ、同様に720pxだったので、同じモノだと勘違いしておりました。

調べ方を誤ったのでしょうか？

横幅が1080pxのスマートフォンを持っていないので調べられませんが、それだとブラウザの横幅はどのくらいなのでしょうか？
度々恐縮ながら、ご存じであればご教示いただきたくお願い申し上げます。

回答No.3

b0a0a

＞レスポンシブWEBデザインは、
＞例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。

いいえ、私はこの使い方は本質的には良くないと思います
viewportのサイズ（screen.widthとは関係ない）に頼るのがこの先どれだけ有効かわからないからですmedia screenはカラムがへんな風に折り返されたりしないよう調整するのが関の山です
とはいえ、他にいい方法がないのでやっぱりブラウザに期待するしかないのが現状です

まあdpi(真の解像度)を見たり
http://moshimoworks.com/2012/04/06/viewport-and-mediaqueries-on-smartphone/
pxではなくインチで指定するといったことで多少は改善できるかもしれませんが
どんな方法でもどこかで妥協が必要です

大事なのは、副作用が無いことです
例えばUAにAndroidとあるからモバイルだとか、Firefoxとあるからデスクトップだとか
とするのは大間違いなのはわかりますよね？
反対にmedia screenは役に立たないことはあるかもしれないけれど副作用は少ないです

基本的にターゲットデバイスに合わせて設計し、マルチデバイスについては
そういった「無いよりマシ」の積み重ねをするのがいいのではないかと思います
また、ユーザーがスタイルを選べるようにするというのも有効だと思います

お礼

ありがとうございます。

回答No.2

ORUKA1951

あくまで原則はリキッドデザインを行い、それを超える対処にレスポンシブを使います。
　レスポンシブデザインの目的は、ひとつのHTMLで様々なユーザーエージェントに対応させることが目的でしたよね。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・・・なぜならただ1種類の文書しか作る必要がなくなるからだ。・・・・
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　一生懸命レスポンシブでデザインしても、ユーザーがフォントサイズや解像度を変更したら使い物にならない・・・では意味がありません。

　スマートフォン、タブレットでも、ユーザーが必ず横にして見てくれるとは限りませんよ!!!

　開発者でしたら、多分firefoxをお使いだと思いますが、アドオンに
・ FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )
・ Default FullZoom Level( https://addons.mozilla.jp/firefox/details/6965 )
・ Live HTTP Headers( https://addons.mozilla.jp/firefox/details/3829 )

　など豊富な開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )がありますので、それらを使って表示を確認すると良いでしょう。

　スマホ専用サイトでもない限り、
640pxあたりで分けた二種類も作成すれば良いでしょう。

お礼

ありがとうございます。