HTML 网站图像背景在 iPhone 上显示错误

Question

我建立了一个在我的移动设备上显示的 html 网站，而在我的 Android 设备 Galaxy S4 上显示图像背景没有问题（配置文件正在显示！），另一方面，配置文件背景不是像这样正确显示。我已经调整了 background-size 等等，但一切都是徒劳的。所以这是我的 CSS 代码如下：

@media only screen and (max-device-width: 640px) {

.hrader-part{

    background: url(../images/bg_android.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding-bottom: 2em;
    width: 200px;
    height: 300px
    }

    }

@media only screen and (max-device-width: 1080px) {

.hrader-part{

    background: url(../images/bg_android.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding-bottom: 2em;
    width: 365px;
    height: 100%
    }

    }

非常感谢朋友！

Answer 1

我无法使用 iPhone，但我能够使用 iPhone 用户代理在 Mac OS X 上的 Safari 7 中重现您的错误。媒体查询中的 css 未应用于元素。将max-device-width 更改为max-width 解决了这个问题。

还有关于您的媒体查询：max-device-width: 1080px 查询会覆盖max-device-width: 640px 查询，因为它在样式表的后面。如果您将min-width 属性添加到第二个媒体查询，它将允许两个查询起作用：

@media only screen and (min-width: 641px) and (max-width: 1080px)