0

我在理解如何在 iPhone 上以体面的方式呈现网页时遇到了一些问题，我认为问题必须margin-left与移动的。

这是它在 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-coupondiv 比 iphone 屏幕更宽，但这并不能解释为什么我无法看到功能区左侧的一部分......一个好的解决方案是让 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 回答