1

私のサイトは、ページの中央にある小さな 540x500 ピクセルのボックスです。iPhone と Blackberry はどちらもコンテンツの先頭を切り捨てています。ページの中央に完全に配置しました。ページの余白が他のデバイスで処理されることを期待して、メタ ビューポートの設定をいじっていましたが、運が良かったのですが、コードの両方の行を組み合わせたソリューションが見つかりません。

私のコードは以下のとおりです。メディア クエリを調査し、メタをデバイス幅 (余白を切り取る) に設定し、その他のオプションを多数設定しました。正直なところ、私は自分がうるさいことを知っており、これにばかげた時間を費やしてきました。

私は助けが必要です！

まず、HTML

<div id="container">content</div>

CSS

#container {
    width:540px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -270px;
    position:absolute;
}

メタ設定

<!--<meta name="viewport" content="width=device-width, initial-scale=1">
    cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
    works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
    works for iPad-->
4

2 に答える 2

1

Apple は、ビューポート設定で幅が 980px 未満のページを宣言することをお勧めします。 http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

メディア クエリを使用して、モバイルでの使用に合わせてマイナス マージンを調整しました。1024px は iPad の最大解像度です。ほとんどのタブレットに対応します。

HTML 見出し

<meta name="viewport" content="width=500">

CSS 見出し

  @media only screen 
  and (max-device-width:1024px) {
    #container {
      width:500px;
      height:500px;
      top:0;
      left:0;
      margin:0 auto;
      position:static;
    }
  }
于 2011-06-10T08:26:18.023 に答える
0

マイナスのトップマージンがコンテンツを切り取っているようです。

モバイルコンテンツは、直線的なトップダウン方式で配置した場合に最適に機能することがわかりました。

それがページ上にある唯一の場合はdiv、モバイルスタイルシートを使用して位置を取り除き、、、、およびいくつかの小さくて単純なものだけwidthを残します。heightmargins

次に、のようなものを使用して<meta name="viewport" content="width=580">、のみを設定しwidthます。

これは過去に私のために働いた。

于 2011-06-09T20:02:34.790 に答える