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

【问题标题】：CSS responsive-design issue between pc browser and iphone browserpc浏览器和iphone浏览器之间的CSS响应式设计问题
【发布时间】：2012-10-15 02:11:58
【问题描述】：

我在理解如何在 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 呈现缩放较少的网站，但我不知道这是否可能，也不知道该属性是否与其他移动平台兼容。所以你怎么看？

【问题讨论】：

标签： iphone html css responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的负边距超过 iPhone 视口宽度的一半，因此它会将其拖出视图。

如果要使元素居中，可以使用margin: auto（只要设置了显式宽度）而不是使用绝对定位来定位元素。

【讨论】：