スマホから見るとヘッダーやフッターが切れしまうのを解決する件

スマホだけじゃないんですが、解像度が小さいモニターとかでは確認しやすい現象なのですが、私の場合PCの解像度は2000px程度あるので、いつも最後のスマホチェックで気づきます！ｗ

具体的には、例えばヘッダーやフッターを100％で全画面表示の指定をしている場合でも、この現象が発生すると、右側が画面いっぱいにまで広がらず途中で切れてしまうんですね。

100％の指定なのに変な話ですよね。

ちなみにこの現象IE・Firefox・Chrome・Operaといった主要ブラウザでほぼ確認できてしまうため困ったものです…。

そこで解決策ですが、なんてことはありません。

別途、min-widthを追加してやればOKなんです！ｗ

例えばヘッダーが100％の指定でもメインのコンテンツとなるサイズは通常決まっていますよね？1000pxとか？

そのメインとなるサイズをmin-widthに追加してやります。

#header {
        widht:100%;
        min-width:1000px;
}

といった感じです。

何個もヘッダーのような定義がある場合には面倒なので、bodyそのものに定義することも可能です。

body {
        min-width:1000px;
}

これは、実際の環境で楽な方を選べば良いかと思います！

サイドが切れて、頭も切れかけの方、一度この方法で定義してみてください！ｗ

現場でかならず使われている CSSデザインのメソッド 著：北川 貴清 , 他