iphone - 在 iPhone 和 iPad 上显示网站的整个宽度

Question

我很感谢精通 CSS 的人的一些建议。由于我无法确定的原因，我的网站只有右侧显示在 iPhone / iPad 浏览器中，而左侧的 1/3 甚至都看不到。

如果有人可以解释导致问题的原因以及如何解决问题，我将不胜感激。

这是设置布局的css部分：

body {
position:absolute;
width: 960px;
top: 0px;
left: 50%;
margin-left: -480px;
}

Answer 1

首先：尝试position: absolute; width: 960px; top: 0px; left: 50%; margin-left: -480px;从您的body.

第二：这是使页面居中的方法width: 960px; margin: auto，将其放在#page

因此，body删除了一些 css，下面的 css#page可能会更好

#page {
    width: 960px;
    margin: auto;
    overflow: hidden; /* to compensate for some element overflowing and messing up your layout */
}

Answer 2

您需要在每台设备上修改身体的宽度。您可以使用 @media 查询通过 css 来完成

/*  Ipad Landscape */
@media screen and (max-width: 1100px) {
  body {
    width: 80%;
    left: 0%;
    margin-left: 10%;
  }

}

/* iphone 5 landscape ipad portrait */
@media screen and (max-width: 800px) 
{
}

/* iphone 4 lanscape */
@media screen and (max-width: 500px) 
{
}

/* iphone 4- 5 portrait */
@media screen and (max-width: 400px) 
{
}