0

この CSS の質問の初歩的な性質については、あらかじめお詫び申し上げます。

CSSで幅を処理する方法を理解しようとしています。<div>かなり広いテーブルを含む絶対配置があります。<div>幅は「1300px」です。デスクトップブラウザではすべて正常に動作します。高解像度のモニターを使用している人は、テーブル全体を見ることができます。解像度が低い場合、または小さいブラウザー ウィンドウからページを表示している場合は、div を水平方向にスクロールしてコンテンツ全体を表示できます。すべてが良いです。

しかし、ネイティブ解像度が 1024px の iPad2 (Safari) では別のことが起こります。私は、iPad がコンテンツの最初の 1024 ピクセルを表示し、ユーザーが水平方向にスクロール (スワイプ?) してテーブルの残りの部分を表示できるようにすることを期待していました。代わりに、1300 ピクセル全体を 1024 ピクセルの画面に詰め込み、タイプを縮小してすべてを収めようとしているようです。

CSS を使用して iPad ブラウザにネイティブ解像度 (つまり 1024) で表示できるものを表示し、ユーザーが残りを表示したい場合に水平方向にスワイプ/スクロールできるようにする標準的な方法は何ですか? コードの小さなスニペットが役立ちます。

ありがとう。

4

2 に答える 2

1

デフォルトでは、iOS Safari は画面に合わせてページを縮小します。希望する動作でない場合は、 のmeta viewportタグを介してブラウザに指示できます<head>。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

編集: より詳細な説明: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

于 2013-01-15T18:12:13.473 に答える
1

私はiPadを持っていないので見れませんが、いくつかのポイント：

あなたの xhtml は無効です。<center>はもう存在しません (そして、見た目からいって、デザインには実際には必要ありません)。また、ヘッダー画像のサイズを px で指定する必要があります。

margin:auto以外で使用している理由がわかりませんmainwrap。margin:0;代わりに試してください。

スタイルシートの先頭に追加してから、後で必要になる追加のパディングとマージンを追加してみてください* {margin:0; padding:0}。これにより、レイアウトに関しては、多かれ少なかれすべてのブラウザーが同じ開始点に設定されます。

境界線を使用したくない場合{border:none}(border: 0px solid;一部のブラウザーがまだ何かを描画しようとする場合)

これで問題が解決するわけではありませんが、マークアップが有効であればあるほど、ブラウザがレンダリングしやすくなるため、正しい方向への一歩となります。

width:100%親要素のいずれかから削除してから、修正してみてください。

それがあなたのために働くことを願っています。

于 2013-01-15T17:39:47.487 に答える