0

次のようにhtmlページをコーディングしました。

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Test</title>
 </head>
 <body bgcolor="#f2f2f2">

     <div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
         <div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
           Hello world
          </div> <!-- end container 2 -->
     </div> <!-- end main container -->

 </body>
</html>

div の幅は 1000px で、プロパティ margin:0px auto を使用して中央に配置されます。これをデスクトップ ブラウザで表示すると問題ありません。しかし、モバイル ブラウザ (iPhone Safari) では、不要な水平スクロールが発生し、ページ全体が横方向および斜め方向に浮きます。

なぜこれが起こるのですか？

iPhone/iPad ブラウザに固有のこの問題を解決するにはどうすればよいですか。他のモバイルではテストしていません。

モバイル ブラウザに Web ページ (デスクトップ ブラウザ用に設計されたもの) を正しく表示させるために必要なコードは何ですか?

提案してください。

ありがとう

4

3 に答える 3

3

提供された提案に感謝します。

わずかな変更で問題が解決しました。

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

これはうまくいきました。

于 2012-04-18T10:09:02.367 に答える
1

次の行を head セクションに追加してみてください:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2012-04-10T09:00:38.520 に答える
0 
<meta name="viewport" content="width=1000, initial-scale=1" />

代わりに、上記を試してください。コンテンツの幅はコンテナーの div の幅と一致するように設定され、ユーザーがズームインできるように最大スケールが削除されます。

于 2012-04-10T10:29:31.307 に答える