iPad 上的背景图像宽度不是 100%

Posted 2023-03-12

【中文标题】iPad 上的背景图像宽度不是 100%

【英文标题】：Background image width not 100% on iPad

【发布时间】：2011-12-05 15:58:10

【问题描述】：

在 iPad 上查看时，我的背景图片没有跨越浏览器的整个宽度。这已经发生了不止一次，所以一定是我写 CSS 的方式。

这是一个页脚示例，其 bg 图像在 iPad 上停止了大约 70% 的路径 - 它有三列浮动在其中。

我已经把完整的项目放在这里了： https://github.com/christineh/TJ-portfolio

html：

<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src=""   border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>

CSS：

footer 
    background: url(images/footer/background.jpg) repeat-x;
    width: 100%;
    height: 113px;
    margin-top: 250px;
    overflow:hidden; 
    overflow-x:hidden; 

.footer_invs 
    background: url(images/footer/corner.png) no-repeat 186px 0px;
    width: 1018px;
    height: 78px;
    padding-left: 200px;
    padding-top: 32px;

.footer 
    float: left;
    width: 275px;

.footer h1 
    padding-bottom: 8px;

.footer p 
    color: #FFF;
    padding-bottom: 0px;
    line-height: 16px;
    padding-top: 0px;

.footer img 
    padding-right: 10px;

.footer3 
    float: left;
    width: 120px;
    padding-left: 70px;

.footer3 h1 
    padding-bottom: 8px;

我是否缺少明显的修复？

【参考方案1】：

我尝试使用上面的建议，即在 body 标签中使用 min-width:1024px 但它不起作用。经过大量搜索，我发现将其添加到 html 标记也可以。

例子：

html 
    min-width: 1024px;
    

【参考方案2】：

相当确定 iPad 屏幕宽度为 1024 像素。是在哪里设置的吗？

body
 min-width:1024px;

注意：我没有我的要测试。

【讨论】：

我下次带上 iPad 时会看看。

我遇到了同样的问题，我在正文中添加了 min-width:1024px 并解决了问题