web-dev-qa-db-ja.com

画面の幅全体に及んでいないdivブロックのiPadの背景

IPadの画面の幅全体に沿って広がるdivブロックに関する問題が引き続き発生しました。画面右側から約20ピクセル止まるようです。

スクリーンショット：

See circledSee circled

メニューについては、divブロックとメニュー自体のUL内部があります。 ULの幅は1000pxに設定され、背景のdivブロックはwidth：100％に設定されます。この背景の幅は正確に1009pxです。

フッターは、背景付きのdivブロックと、2つのフローティングdivブロックです。このための背景の幅は正確に1004pxです。

私は他のウェブサイト、特にこの分野でこの問題を経験しました。誰かが何か考えがありますか？

iphonecssipadbackgroundwidth
21
Don Wilson

デフォルトのビューポートが980ピクセルであるため、iPadで問題が発生しています（ Appleのドキュメント を参照）。したがって、表示される効果は、デスクトップブラウザを1000ピクセル未満に縮小して右にスクロールした場合と同じです（同じことを行います）。

ブラウザウィンドウの幅に応じて、ギャップのサイズが変化します。これは、ラッパーdivにwidth：100％を設定しているときに、含まれている要素（この場合はブラウザーウィンドウ、またはiPadのビューポート）の幅にサイズ変更するように指示しているためです。あなたはではなくコンテンツ内のコンテンツにサイズ変更するように彼らに伝えています。

@ sandeep's solution は正しいものであり、それを実装した方法はSafariではうまく機能しますが、他のどのブラウザーでもうまく機能しません。サファリ？その場合、必要はありません。min-width:1024px、または単にmin-width:1000pxをbodyタグに、または.footerbgただし、通常はCSSを適用します。

47
Walter Cameron

私はあなたのウェブサイトを見ました、問題はiPadだけでなくPCバージョンにもあります。水平スクロールがPCにあるとき、ページはiPadバージョンと同じように動作するからです。自分自身で調べて。

Solution：次のように書いてください。

body{
 min-width:1024px;
}
29
sandeep

これは機能します

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">
2
Rem

IPad-Screenの幅は、横長モードで話す場合、1004ではなく1024ピクセルです。

1
Till

幅サイズが正しくありません。しかし、心配する必要はありません。 1004の代わりに1024が必要です。

お役に立てれば！

1
Otroberts

あなた/誰もがiPadでのみ修正する必要がある場合、あなたは好きにすることができます

<?php if ((bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
    <meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
    <meta name="viewport" content="width=device-width">
<?php endif ?>

この助けを願っています:)

0
Ijas Ameenudeen

ビューポートのメタタグを使用してビューポートの幅をデバイスの幅に設定しようとするとどうなりますか？

<meta name="viewport" content="width=device-width, initial-scale=1">

出典： Mozilla Developer Network

0
bheussler

ページの頭に追加

<meta name="viewport" content="width=1000px">

サファリだけでなく、iPad上のすべてのブラウザで機能します

0
zekia