2

これはウェブサイトです：

問題は、画面がビューポートに適応せず (最初のロード時に両側に白い余白がない)、ズームアウトしてページ全体を見ると奇妙な大きな白い余白が正しく表示されることです。

このタグを使用して達成しようとしていますが、まだあまり機能しません。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes" />

これは私のcssです：

body {
background-color:#fff;
font-family:'Droid Sans', arial, sans-serif;
color: #777;
width: 100%;
margin:  0;
}
#page {
width: 950px;
margin: 0px auto;
padding:0px;
background-color:#fff;
z-index: 0;
}

どうすれば修正できますか？

4

2 に答える 2

6

必要なのは、CSS メディア クエリと呼ばれるものです。基本的に、特定の画面サイズに対して異なる CSS ルールを作成します。例えば

@media screen and (max-width: 700px) and (min-width: 520px) {
  body {
    background: red;
  }
}

は、ブラウザ ウィンドウ/画面の幅が 520px より大きく 700px より小さい場合は常に、本文の背景を赤色に設定します。

「CSS メディア クエリ」と「レスポンシブ デザイン」をグーグルで検索してみてください。正しい方向に進むことができます。

于 2012-12-14T20:29:49.457 に答える
1

あなたの問題はスライドショーとviewportタグのようです:

#slideshowwidth:1083px;あなたのサイトの右側に空白を引き起こしているものに設定されています。これをに変更する100%と、修正されます。オーバーフローがhidden要素に設定されているにもかかわらず

initial-scale=1.0最初にロードしたときのサイズです。1:1 のピクセル比で読み込まれており、ページ全体を表示するために縮小されていません。

width=device-widthページの幅をデバイスの幅 (iPhone のモバイル Safari では 320px) に設定しています。これを次のように変更するwidth=950と、ビューポートの幅がサイトの幅 950px に等しくなります。これにより、ユーザーは完全にスケールアウトして、サイトの幅全体を見ることができます。Safari は、ページの下部に空白を追加します。

于 2012-12-14T22:16:09.350 に答える