3

私はウェブサイトをテストしていました:このウェブサイト

次の問題に出くわしたとき。コンピューターでテストしたすべてのブラウザー (IE、Chrome、Safari、Firefox など...) ですべてが正しく見えますが、この Web サイトを iPad でテストすると、Safari ブラウザーで右側に奇妙なマージンが発生し、表示できませんスクリーンショットですが、一言で言えば、コンピューターで見たようなすべてのウェブサイトページですが、左側にシフトしています（右側に空白があります）。誰かがこれを引き起こしていることを示唆できますか?

編集：

この余白は、側面にある矢印の余白 (スライドを一覧表示するために使用) の影響を受けていることに気付きました。ボタンのスタイルには次の ID があります

#prevslide   and   #nextslide

EDIT2：

コードが非常に長いので、ウェブサイトで使用されているスタイルシートへのリンクをここに掲載します。

スライドショー スタイルシート、#prevslide、#nextslideスタイル ルールは、2 番目のスタイルシート

Style1
Style2にあります。

そして、私がウェブサイトの外観をスタイリングするために使用するメインのスタイルシートですが、問題はその中にあるとは思いません。

メインスタイル

4

2 に答える 2

2

あなたの問題は、css の % とピクセルの組み合わせが原因のようです。

たとえば、.header ラッパーは 100% に設定されていますが、その中の .in-header は 1020px に設定されています。これは、ブラウザー ウィンドウが 1020 ピクセルよりも広い限り問題ありませんが、縮小すると、ブラウザー ウィンドウに対して .header 自体がサイズ変更されますが、.in-header はそうではありません。

body 要素に min-width プロパティを設定して、メイン ページ要素のサイズを下回らないようにします。

  body {
    min-width: 1020px;
  }
于 2012-08-11T23:49:10.663 に答える
2

iPad (およびモバイル) のヘッダーにメタ タグを設定する必要があります。

<meta name="viewport" content="width=device-width" />

これにより、ページの本文をタブレットのサイズに合わせて設定するようブラウザに指示します。これがあなたが望む正確な設定であるかどうかは 100% 確信が持てませんが、テストするのに iPad が手元にありません。解決策が何であれ、それはこのタグにあります。

于 2012-08-10T11:12:59.650 に答える