iphone - pc浏览器和iphone浏览器之间的CSS响应式设计问题

Question

我在理解如何在 iPhone 上以合适的方式呈现网页时遇到了一些问题，我认为这个问题必须与 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>

---

我知道 center-coupon div 比 iphone 屏幕更宽，但这并不能解释为什么我看不到功能区左侧的一部分……一个好的解决方案将强制 iphone 以较小的缩放比例呈现网站，但我不知道这是否可能，也不知道该属性是否与其他移动平台兼容。所以你怎么看？

Answer 1

我不是 iPhone 专家，但我的理解是设备的像素密度与 CSS 像素无关。所以，就CSS而言，手机的宽度是320px。您将优惠券的左边缘定位在页面中间，然后将其向左移动 237 像素，这实际上将其置于屏幕之外。您是否尝试过将负边距更改为较小的数额？