Question

我有一个问题我的网站在Android和桌面上运行良好但在ipad / iphone上我的背景图像看起来非常大而且坏了，我添加了背景附件：滚动但仍然无法修复它。问题＃2，当我查看我的网站iphone / ipad我可以水平滚动，并在右侧显示白色的步伐ix this.imean没有水平滚动，我添加了溢出：隐藏或溢出-x：隐藏，

  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

尝试将视口标记更新到下面以解决宽度问题：

<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;
}
}

标题的背景削减在ipad / iphone上，并且在iphone / ipad上正常可见，在桌面和android上工作正常

1 个答案: