Question

使用safari或chrome时，我的div上的背景无法在iphone上正确加载。它在Mozilla中是完全响应的，但是在safari和chrome中，它仍然以100％宽度和100％高度加载。它是“ sect” div的背景图像。这是我的html

  <div class="sect">


<H1>ALESH</h1>

<h2>This is me</h2>


<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>



</div>

这是我的PC版CSS

 html, body {
 height: 100%;
 background-color: white;
 background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;

     }

 .sect {
 height: 100%;
 width: 100%;
 background-position: absolute;
 background: url("homepage/photos/b1.jpg") no-repeat center center      scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;

 padding: 0;
 left: 0;
 Right: 0;
  margin: auto;
 top: -2px;
 overflow: hidden;

 }

我确实有一个单独的CSS文件，用于“最大设备宽度：480像素”。但是什么都行不通，您是否知道哪里可能出了错？

Answer 1

我有类似的东西：背景图像在Safari和Safari移动设备上无法正确显示。

问题是关于

background-attachment: fixed

对于移动浏览器来说这有点棘手。
对我来说，我只需要把它排除在外。

有时，定位不可用。因此，尝试不使用。

可能对您有帮助：
Fixed background on iOS

希望有帮助。

附加：
还可以在Stack上找到this关于该问题的信息。

Answer 2

将此标签添加到head标签

<meta name="viewport" content="width=device-width, initial-scale=1">

背景图片对野生动物园和Chrome没有响应

2 个答案: