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

Posted 2023-03-12

【中文标题】在 iPhone 和 iPad 上显示网站的整个宽度

【英文标题】：Show Entire Width of Website on iPhone and 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 自动；

【参考方案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。尽管这不是我问的问题，但您的建议将在该项目的未来工作阶段对我有所帮助，我非常感谢您如此详细地介绍它。