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和#page下面的css，它可能效果更好

#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) 
{
}

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

2 个答案: