スマホやタブレットでスタイルシートの背景色が途中で途切れる場合の対応

サイトのデザイン定義をスタイルシートで行った際にパソコンでは正常に表示される背景色がスマートフォンやタブレットで表示すると途中で途切れることがある。

背景色が途中で途切れる




1.背景色が途切れる原因


背景色をbody部に設定したりdivタグなどでwidthを100%にしている場合、ウィンドウの幅で背景色は表示されているが表示しきれなかった箇所はブラウザが描画しないためスクロールすると途切れたようになってしまうのが原因である。
スマートフォンやタブレットにおいてはviewportにwidthの指定をした値、もしくはデフォルト値となる980pxで前述と同様の状況となり背景色が途切れてしまう。

2.背景色を途切れさせない方法


スタイルシートでbody部に対して下記のように最小幅を指定することでスクロールしたり、スマートフォンやタブレットで閲覧しても背景色が途切れずに表示される。

min-width: (サイト幅)px;


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント