出産前後の痔にはご注意!

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (1件)

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


 パソコンなどのディスプレイでその幅で見ることはありませんので。

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

<header></header><!-- HTML4なら <div class="header"> -->
<section><!-- HTML4なら <div class="section"> -->
 本文
 <nav>ナビ</nav>
 <aside>補足</aside>
<section>
<footer></footer>
だとして
パソコン
┌──────┐
│HEADER│
├─┬──┬─┤
│N│本文│補│
│A│本文│足│
├─┴──┴─┤
│FOOTER│
└──────┘
スマホ↓
┌───┐
│HEADER│
├─┬─┤
│N│本│
│A│文│
├─┴─┤
│補足?│
├───┤
│FOOTER│
└───┘
のように切り替えると良いでしょう。
    • good
    • 0
この回答へのお礼

ORUKA1951 様

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

お礼日時:2013/07/30 11:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング