html - CSS 在 iPad/iPhone 上显示不正确

Question

我有一个我正在开发的网站，我的客户提醒我一个问题 - 它无法在 iPad/iPhone 上正确显示。 Chrome/FF/Safari(在 PC 上)都正确显示。

站点是http://xprotect.co.nz

右侧下方有一条黑色 strip ，这是 body 标签的背景色。它也显示在底部。

我已经设法让 Firebug lite 在 iPad 上运行(因为问题没有在带有开发人员工具的 Safari 中显示 - 使用 iPad 作为屏幕代理)。我可以看到问题的根源——但看不到问题的根源。

iPad 上的 Firebug 告诉我两个容器 div(outerContainer 和 middleContentOuter)的计算值为 980 像素，而每个容器中居中的 div 的宽度为 1000 像素。所以我实际上在右侧丢失了 20 像素 - 有些东西导致这些容器 div 减少了 20 像素，即使每个容器的指定宽度是 100%。

谁能发现我无法发现的东西或提供任何建议？

非常感谢，

托比。

Answer 1

你需要在你的 css 中设置最小宽度:

 .outerContainer, middleContentOuter{
      min-width: 1000px;
 }