我在移动设备上遇到了显示网站的问题。设置为cover
的图像背景大小在桌面上运行良好,但在Chrome安卓手机中,它无法全屏显示。我知道之前曾经问过并尝试过但我没有运气。
我尝试的是:
html, body {
height:100%;
min-height:100%;
margin: 0;
/* The image used */
background-image: url('../images/bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
我还尝试添加媒体查询以显示较小的背景图像以适应移动屏幕,但没有运气。
媒体查询:
@media only screen and (max-width : 500px) {
body, html {
background-image: url('../images/mobile-bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
}