【问题标题】:Show Entire Width of Website on iPhone and iPad在 iPhone 和 iPad 上显示网站的整个宽度
【发布时间】:2013-04-18 12:15:54
【问题描述】:

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

如果有人能解释导致问题的原因以及解决方法,我将不胜感激。

这是设置布局的css部分:

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

【问题讨论】:

  • 首先,尝试从 BODY 标签中移除绝对定位、宽度、边距、left。如果您想使您的网站居中,请将所有内容包装在一个 div 宽度 width:960px;边距:0 自动;

标签: iphone ios css ipad


【解决方案1】:

首先:尝试从您的 body 中删除此 (position: absolute; width: 960px; top: 0px; left: 50%; margin-left: -480px;)。

第二:这里是如何使页面居中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 */
}

【讨论】:

  • 完美,@约翰。这解决了一切。我很高兴认识一个清楚了解 CSS/Wordpress 的人。
【解决方案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) 
{
}

【讨论】:

  • 谢谢你,@Romain。尽管这不是我问的问题,但您的建议将在该项目的未来工作阶段对我有所帮助,我非常感谢您如此详细地介绍它。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-05-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-21
相关资源
最近更新 更多