css - 标题中的背景在 ipad/iphone 上被剪切，在 iphone/ipad 上无法正确显示在桌面和 android 上工作正常

Question

我的网站有问题，它在 android 和桌面上运行良好，但在 ipad/iphone 上，我的背景图像似乎非常大且损坏，我添加了 background-attachment:scroll 但仍然无法修复它。 问题#2 当我查看我的网站 iphone/ipad 时，我可以水平滚动并且右侧出现白色步伐如何解决这个问题。我的意思是没有水平滚动，我添加了 overflow:hidden 或 overflow-x:hidden,

  body {
    overflow-x:hidden;
    }
    html,body {
        margin:0px;
        padding:0px;
        height:100%;
        width:100%;
    }


    .header  {
                 background:url("Images/2.gif") no-repeat center center;

                width:100%;
                height:auto;
                padding-bottom:30px;
                background-attachment:scroll;
             -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }
    website link : http://www.colddays.somee.com/

Answer 1

尝试将视口(viewport)标签更新为以下内容以解决宽度问题:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

对于背景图片，将其添加到您的横向和纵向媒体查询中:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.header {
    background-attachment: scroll;
    background-position:top center !important;
    background-size: cover;
}
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.header {
    background-attachment: scroll;
    background-position:top center !important;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px !important;
}
}