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

Question

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

仅@media屏幕和（max-device-width：640px）{

.hrader部分{

    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屏幕和（max-device-width：1080px）{

.hrader部分{

    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)