レスｐンシブのＣＳＳについて

質問

レスポンシブデザインのコーディングをしています。
CSS上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。

@media screen and (max-width: 640px) {　～　}

Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、
Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。

縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている
ようなのですが、ＣＳＳで回避する方法はありますでしょうか。

それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。

回答No.1

ORUKA1951

スクロールバーは内容がはみ出ない限り表示されませんし、スクロールバーはブロックの内側に現れますから、firefoxの解釈が正しいのですが、それを回避する為にはブレークポイントのサイズを655pxとか660pxにするのが簡単です。
　パソコンなどのディスプレイでその幅で見ることはありませんので。

　なお当然ですが、いずれもリキッドデザインが原則です。パソコンなどの小さなディスプレイでmediaqueryが無効であっても、リキッドで追随していくが、限界を越すと(mediaqueryに対応した端末では)デザインを切り替えると考えます。
　例えば、ブレークポイントまでは、３カラムの配置でウィンドウ幅に合わせて伸縮しますが、それを越えて小さくなると２カラムに変化する。(もちろん携帯電話などでは、１カラムですが)
HTML5として

<header></header><!-- HTML4なら <div class="header"> -->
<section><!-- HTML4なら <div class="section"> -->
　本文
　<nav>ナビ</nav>
　<aside>補足</aside>
<section>
<footer></footer>
だとして
パソコン
┌──────┐
│ＨＥＡＤＥＲ│
├─┬──┬─┤
│Ｎ│本文│補│
│Ａ│本文│足│
├─┴──┴─┤
│ＦＯＯＴＥＲ│
└──────┘
スマホ↓
┌───┐
│HEADER│
├─┬─┤
│Ｎ│本│
│Ａ│文│
├─┴─┤
│補足？│
├───┤
│FOOTER│
└───┘
のように切り替えると良いでしょう。

お礼

ORUKA1951　様

ご丁寧に解説頂きありがとうございます。
大変参考になりました。