0

iPhoneで適切な方法でWebページをレンダリングする方法を理解するのにいくつかの問題があります。問題はに関連している必要があると思いますがmargin-left、PCで適切にレンダリングするために問題を解決する方法がわかりません。モバイル。

PC ブラウザでの表示は次のとおりです。 ここに画像の説明を入力

空白が多すぎて申し訳ありません。div が中央にあることを明確にするためです。そして、これは私のiPhoneでどのように見えるかです：

ここに画像の説明を入力

指でページを移動しても、青いリボンの左側が見えなくても、それは「画面外」です。

これは私のコードです（その一部）：

CSS

#center-coupon {
  width: 474px;
  height: 255px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -237px;
  margin-top: -150px;
  text-align: center;
}

#rib { 
  background-image:url(img/ribbon.png); 
  height:75px; width:474px; 
}
#main4 { 
  position:relative;
  background-color:#eeeeee;
  height:300px; 
  width:340px;
  left:66px 
}

HTML

<div id="center-coupon">
  <div id="rib"></div>
  <div id="main4">
    <p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
    <p>coupon awarded to</p>
    <img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
    <span style="font-size: 25px; font-weight:bold;"> Domingo</span>
    <p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
    <p>created on 2012-10-21</p>
    <a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>  
  </div>
</div>

divがiPhoneの画面よりも広いことは知ってcenter-couponいますが、それではリボンの左側の一部が見えない理由を説明できません...良い解決策は、iPhoneがサイトをより少ないズームでレンダリングすることです。それが可能かどうかはわかりませんし、そのプロパティが他のモバイル プラットフォームと互換性があるかどうかもわかりません。それで、あなたはどう思いますか？

4

2 に答える 2

1

負のマージンが iPhone のビューポート幅の半分を超えているため、ビューの外にドラッグしています。

要素を中央に配置する場合は、margin: auto(明示的な幅が設定されている限り) 絶対配置で要素を配置するのではなく、 を使用できます。

于 2012-10-25T00:39:18.583 に答える
1

私は iPhone の専門家ではありませんが、デバイスのピクセル密度は CSS ピクセルとは何の関係もないことを理解しています。したがって、CSS に関する限り、電話の幅は 320px です。クーポンの左端をページの中央に配置してから、左に 237 ピクセル移動します。これにより、実質的に画面の外に配置されます。マイナスマージンを小さく変更してみましたか？

于 2012-10-24T23:38:32.940 に答える