web-dev-qa-db-ja.com

モバイルサファリでのみ100％幅のCss問題

問題のサイトは次のとおりです。 www.prestigedesigns.com

問題は、ヘッダーとフッターが割り当てられた100％まで伸びず、iPhone/iPadのみであるということです。

私がすべてだと思うことを試してみましたが、本当に助けが必要ですか？同様の問題を抱えている人はいますか？

ありがとう。

htmlcssmobilemobile-safari
26
george

これはモバイルSafariのビューポートの問題のようなものですが、デスクトップブラウザーウィンドウの幅を縮小して右にスクロールすると同じ効果を得ることができ、背景がドロップアウトし始めます。

これは、width:100%を#topおよび#header divに設定するときに、含まれている要素（この場合はブラウザー）の幅にサイズ変更するように指示しているためです。ウィンドウ（またはビューポート）。内部のコンテンツに合わせてサイズを変更するように彼らに言っているのではありません。

Mobile Safariのデフォルトのビューポートの幅は980pxであるため、divの収容要素の幅として980pxを使用します。これが、約1050pxのレイアウトが背景を切り落とす理由です。

これをモバイルSafariで修正するには、ビューポートを直接設定する（ Appleのドキュメント を読む）か、デザインのmin-width:widthをピクセル単位で追加する; bodyに。 Mobile Safariはmin-widthの値を使用してビューポートを設定します。また、デスクトップブラウザーでも発生しないようにします。

70
Walter Cameron

ビューポートを設定して、任意のデバイスでページを調整します。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
32
helpyou

CSSファイルでmin-width:(Width of your design)px;を設定すると、この問題は解決されます。

1
Shalmal Sheth

割り当てられていないwidth: 100%ヘッダーが取得していますwidth: 1009px;フッターと同じこと。

0
David Nguyen

私は実際にテストすることはできませんが、フットバーはヘッダー要素と同じ％に設定されていますが、フットバー内にあるフット要素はピクセル単位の絶対幅に設定されています-これらも％に切り替えてみてください？

0
allanmayberry88