iPhone表示時の画面右側の背景色の途切れを回避 | SEO対策･ホームページ制作[BRIDGE]ブログ

ホーム » ブログ » iPhone表示時の画面右側の背景色の途切れを回避

cssiPhone表示時の画面右側の背景色の途切れを回避

2013/09/20

最近知り合いが運営している会社のPCサイトがiPhoneやiPadで表示したときのみ、画面右端のbackground-color(背景色)が途切れてしまうとのことでした。

まずクライアント様のサイトはヘッダーとフッターが画面の幅いっぱいにbackground-colorで色づけされていました。

↓下記のようなcssの記述

#header {
 height:127px;
 width:100%;
 background-color:#FF9999;
}
#footer {
 height:70px;
 width:100%;
 background-color:#FF9999;
}

背景色はワイドmaxですが、実際コンテンツが入るボックスの幅は1024pxとなっていました。

iPhone系のブラウザは自動で980pxの幅で表現するので足りない部分が空白として表示されてしまっていた訳です。
(Android端末は問題なく表示されます。)

そこで一つの解決策としてcssの「body」要素にコンテンツ全体幅の最小値を記述して解決しました。

body {
	min-width: 1024px;
}