レスポンシブがよくわからない

質問

■質問1

PC、タブレット、スマホで一つのhtmlとcssでレスポンシブに変更する場合、

@media screen and (min-height: 600px)

を使って変更すると説明している解説サイトが多いです。
しかし端末は年々高解像度になっていますし、解像度は端末毎にみんなバラバラですよね？
解像度が低いとスマホ、中位だとタブレット、高解像度だとPCみたいな別け方ですが、
最近のスマホはかなり高解像度でPC並だと思うのですが、なぜこのcssで
振り分けができるのでしょうか？

自分が思うのは、スマホの横解像度が1024pxだったとしてもスケールが影響して
@media screen and (min-height: 600px)に収まるようになっているとかでしょうか？

このへんを説明しているサイトがなく、単に@media screeを使うとしか解説していないので教えて
もらえると助かります。

■質問2

端末によって横解像度が違うのでdivブロック内の文章がどの文字でdivの右端で折り返されるかは
端末毎に変わるのは仕方のないことですよね？

取引先の担当者に、改行や右端での折り返しが端末ごとに異なると怒られたのですが、なるべく見やすく
文字をremで指定しているし、そもそもフォント自体の幅が端末毎に違うので折り返しがまちまちなのは仕方のないことなのでしょうか？
それとも同じにできるのでしょうか？

どうぞよろしくお願い致します。

回答No.4

ORUKA1951 · ベストアンサー

No.2です。
＞iPhone、iPadだけでもこれだけの種類に別けなくてはならないのですね。
＞・・・【中略】・・・
＞実際に皆さんはかなり多くの解像度振り分けをされているのでしょうか？
　そんな無茶はできません。今後も益々増えていきますし・・
　viewportをつかってデバイスの解像度で振り分けています。
　viewportを使うと、逆に文字数との指定は楽になります。

＞取引先の言い分は、「スマホでも文字を見やすい大きさにしつつ、1行に収まるように、もし<br>を使っていたらきちんと改行も正しくなるようにしろ」
　ここは整理したほうが良いですね。

<br>を使う場面と言うと
<address>
株式会社ABC<br>
東京都品川区<br>
・・・・町・丁目・番<br>
</address>
などでしょうが、その場合に
株式会社ABC
東京都品川
区
・・・・町・
丁目・番
と改行されてはまずいのはわかります。しかし、

<p>取引先の言い分は、<q>スマホでも文字を見やすい大きさにしつつ、1行に収まるように、もし&lt;br&gt;を使っていたらきちんと改行も正しくなるようにしろ</q>という感じでした。</p>
が、

　取引先の言い分は、「スマホでも文字を見やすい大きさにしつ
つ、1行に収まるように、もし<br>を使っていたらきちんと改行も
正しくなるようにしろ」という感じでした。

だろうが、

　取引先の言い分は、「スマホでも文字を見やすい大
きさにしつつ、1行に収まるように、もし<br>を使って
いたらきちんと改行も正しくなるようにしろ」という
感じでした。

と表示されようと構わないというか、そうあるべきです。

　あなたが言われるように、
　これはテストサイトです。これはテストサイトで
　す。
　これはテストサイトです。これはテストサイトで
　す。
がまずい状況と言うのが思い浮かばない。

★ウェブページをまるでカタログや印刷物のようなイメージで捉えているクライアントも存在します。その方には、実例を上げて説明して納得してもらう。それも請けた側の仕事の一つですね。
　端末によってと言われる方は、「携帯電話、モバイル機器、音声入出力機器、点字端末、プリンターはどうされますか？？」と問いかければ(^^)

お礼

ありがとうございます！

＞viewportを使うと、逆に文字数との指定は楽になります。

そうなのですね。デバイスが多くて逆に面倒なのかと勝手に思ってしまいました。
ちょっといろいろ調べて勉強してみようと思います。

＞ウェブページをまるでカタログや印刷物のようなイメージで捉えているクライアントも存在します。その方には、実例を上げて説明して納得してもらう。それも請けた側の仕事の一つですね。

ああ、やはりそうですよね・・・。画面を見せながら説明しているのですが
なかなかご理解いただけなくてかなりお怒りです・・・。
自分の努力と知識が足りていないので当たり前なのですが。

とりあえず皆さまにアドバイス頂きまして現状がわかってきましたのでもう少し調べてみようと思います。
どうもありがとうございました。

回答No.3

t_ohta

＞　取引先が両方に対応しろ（文字の大きさが見やすくて、端末によって全て同じ見え方にしろ）と言っているので悩むところです・・・。

そういった要望を究極に実現したのがページ全体が画像で出来ているページでしょう。
もしくはPDF化して読ませるとか．．．
基本的な発想は紙媒体であってWebの利点を理解していない人の発想ですよね。

どんな環境でも同じように見えるというのは見せる側の自己満足でしかなく、見ている人の利便性を無視した愚かな行為です。
デバイスの種類が多様化した今の時代、そんな考え方がナンセンスだと言うことを教えてあげるのもWeb制作に携わる人間の仕事だと思いますよ。

お礼

ありがとうございます！

＞そういった要望を究極に実現したのがページ全体が画像で出来ているページでしょう。

はい、画像と同じように文字もどの端末でも同じように見えるようにしろとのご命令でして・・・。

＞デバイスの種類が多様化した今の時代、そんな考え方がナンセンスだと言うことを教えてあげるのもWeb制作に携わる人間の仕事だと思いますよ。

そう言われるとその通りですね＾＾；
もう一回きちんとご説明しようと思います。

回答No.2

ORUKA1951

質問1に関しては
　⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
　の「4. スマートフォンならではの Viewport」
　( http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ )
にとても詳しく書かれているので譲るとします。

質問2に関しては、
　もともとHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
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 )］より
　なのですから、大事な事は『どんな環境からもWebの情報を利用できるようにすべき』であって、「改行や右端での折り返しが端末ごとに異なると怒られた」はある程度視片がないのですが、ひょっとしてHTMLそのものに問題があるのじゃないかと・・
　ちゃんと段落は<p></p>でマークアップされていていますか？。<br>を代用するなどしているのでは？？
　『divブロック内の文章がどの文字でdivの右端で折り返されるかは端末毎に変わるのは』
の意図がわからないのですが・・。divの使い方そのものが？？？

お礼

ありがとうございます！

質問1に関して
自分でもちょっと調べてみましたら以下のサイトが見つかりました。
http://www.entereal.co.jp/blog/entry_media-queries-for-iOS-devices.html

iPhone、iPadだけでもこれだけの種類に別けなくてはならないのですね。
これにandroidが加わればデバイスの振り分けがかなり厳しいのではないかと思います。
実際に皆さんはかなり多くの解像度振り分けをされているのでしょうか？

私は

html {font-size: 62.5%;}

div {
　font-size: 14px;　/* rem未対応ブラウザ用 */
　font-size: 1.4rem;
}

このようにしています。
なのでMedia Queriesでの振り分けやmetaタグにviewportは設定していません。
これでも一応androidとiPhone5はいい感じで表示されています。
（boilerplate.cssというのは導入しています）
作っているサイトが1カラムなのでスマホでも対応させやすいのでこの簡単な方法
しか採用していません。

自分がやっているこの方法でいいのか悩むところですが、Media Queriesを使った場合
やはりいろんなデバイスで確認しないとダメですよね？
自分はandroidしか持っていないのでなかなか確認ができません。

質問2に関して
＞ちゃんと段落は<p></p>でマークアップされていていますか？。<br>を代用するなどしているのでは？？
＞『divブロック内の文章がどの文字でdivの右端で折り返されるかは端末毎に変わるのは』
＞の意図がわからないのですが・・。divの使い方そのものが？？？

たとえばヘッダー用divに以下のような文章を入れたとします。

　<div><p>これはテストサイトです。これはテストサイトです。これはテストサイトです。</p></div>

PCでは横幅800pxに1行で収まるとします。
しかしスマホでは、

　これはテストサイトです。これはテストサイトで
　す。これはテストサイトです。

このように2行で表示されてしまいます。文字の大きさをremで指定しているためです。
これをpxで指定してしまうと今度は文字が小さくなって見づらくなってしまいます。

取引先の言い分は、「スマホでも文字を見やすい大きさにしつつ、1行に収まるように、もし<br>を
使っていたらきちんと改行も正しくなるようにしろ」という感じでした。

改行を使っている場合（<p>でもいいですが）

　<div>
　　<p>これはテストサイトです。これはテストサイトです。</p>
　　<p>これはテストサイトです。これはテストサイトです。</p>
　</div>

これをスマホで表示すると

　これはテストサイトです。これはテストサイトで
　す。
　これはテストサイトです。これはテストサイトで
　す。

となってしまいます。
文字の大きさを見やすい大きさに調整しつつ、文章が適切な表示に収めることにかなり苦労して
いますが、皆さんはどのようにしているのでしょうか？

長文失礼しました。どうぞよろしくお願い致します。

回答No.1

t_ohta

回答１
スマホやタブレットのブラウザにはviewportと言う概念があります。
これは、ディスプレイの解像度とは別にブラウザが便宜上表示領域の解像度をいくつと認識するかと言うものです。
なので、各々の機器のディスプレイの解像度を気にすることなくページの解像度を指定できます。
スマホだと短辺は320～360px、長辺が480～570pxくらい、
タブレットだと短辺が600～780px、長辺が960～1024pxくらいに設定されています。
（多少幅があるものの、端末・メーカーが異なってもだいたい同じサイズに決まってます）
レスポンシブはこのサイズをベースにデバイスを判定するよう考えられています。

回答２
DIVの幅とフォントサイズをpx指定すると折り返し位置は大概揃いますが、あまり意味の無いことだと思います。
文字は人によって、端末によって見やすいサイズが異なるので、見る人が見やすいサイズに拡大・縮小しても漏れなく情報を表示できるよう作ることの方が大事なのではないでしょうか。

お礼

ありがとうございます！
回答1ですが、便宜上の解像度だったのですね。
デバイスの種類、ちょっと調べて見ようかと思います。

回答2ですが、px指定だとスマホで文字が小さくなってしまいますよね。
折り返しを意識しなくてもいいデザインにすればいいのでしょうけど、取引先が
両方に対応しろ（文字の大きさが見やすくて、端末によって全て同じ見え方にしろ）と
言っているので悩むところです・・・。