2

我有以下 HTML：

<body>
  <div id="page">
    <ul id="images">
      <li class="image">
        <img src="portrait.jpg"/>
      </li>
    </ul>
    <div id="trailing-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
    </div>
  </div>
</body>

使用以下 CSS：

body, html{

  width:100%;
  height:100%;

}

body, div, ul, li{

  border:0;
  margin:0;
  padding:0

}

ul, li{

  list-style:none;

}

#page{

  width:75%;
  height:100%;

  margin:0 auto;

}

#images{

  position:relative;

  width:100%;
  height:70%;

  overflow:hidden;

}

#images .image{

  width:100%;
  height:100%;

  text-align: center;

}

#images .image img{

  max-width:100%;
  max-height:100%;

  margin:0 auto;

}

这里的预期结果是可见图像在给定时间最多为屏幕高度的 70%。这在主要浏览器的桌面版本（经过测试的 Firefox、Chrome、Safari）中完美运行，正如您在这个codepen中看到的那样。

但是当在移动浏览器中（特别是在运行 iOS6 的 iPhone 4 上的 Safari 和 Chrome Mobile 中）时，图像仍然很大（由overflow:hiddenCSS 中的规则切割）并且没有适当地限制它的大小。

iPhone截图：

在此处输入图像描述

这是桌面版本应有的作用：

桌面

奇怪的是，这只发生在#images标签后面的后续内容（在这种情况下#trailing-content）。这表明图像忽略了它的父尺寸，只尊重实际的 iPhone 屏幕尺寸。

更新

我仍然不知道是什么原因造成的，并且注意到 iOS7 确实可以正常工作。但我不愿意在这里放弃对 iOS6 的支持，所以决定悬赏这个问题。

4

3 回答 3

0

大多数移动设备使用 webkit。您是否尝试过任何 webkit css 选项？

例如

body {
   -webkit-text-size-adjust: none;
}

以下是一些具有良好文档的 webkit 选项（我认为还有更多）：

http://css-infos.net/properties/webkit

编辑：

另一方面，当您删除 max-height 属性时会发生什么？

于 2013-11-19T15:29:11.683 回答
-1

我会尝试以下方法：

max-width: 70%;
height: auto;
width: auto;

这样，图像应该正确调整大小而不会裁剪。但是，我遇到了大图像的裁剪问题，我只需要复制并调整其大小即可使其正常工作。

于 2013-11-18T07:05:42.063 回答
-2

在处理高度时避免相对于屏幕大小的百分比。使用嵌套元素和隐藏溢出对高度和宽度设置基于百分比的约束就像自找麻烦。您是否看到图像被裁剪以使其全高完全适合屏幕？

当然，您可以继续尝试和错误，但在我看来，这是浪费时间（也浪费神经）。

相反，只需进行设置max-width: 100%，例如max-height: 500px避免在大屏幕上过大，并让您的内容自由向下滚动。

如果您希望您的页面完全响应，请使用CSS 媒体查询。

于 2013-11-17T23:10:25.913 回答