css - 背景图像未缩放到手机。

Question

我有一个基于 html5 wordpress 空白的网站。

http://thesemachinesarewinning.com/

如您所见，它会根据浏览器窗口调整大小和缩放，但在移动设备上，背景图像不会缩放， Logo 和导航仅在横向 View 中完全显示。

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (min-width:768px) {

}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-resolution:144dpi) {

}

/* css for the nav and background image

body {
    font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height:100%;
    z-index:1;
    background:url('img/home-bg.jpg') no-repeat fixed center right;
    background-size: cover;
    width:100%;
    margin:0;
    padding:0;
}
.page-section {
    width:100%;
    margin:0px auto 0px auto;
    overflow-x:hidden;
    z-index:100;
}
.nav-wrapper {
    margin:3px auto 0px auto;
    float:left;
}
.wrapper {
    max-width:1280px;
    width:95%;
    margin:0 auto;
    position:relative;
    background-color:transparent;
}

Answer 1

尝试用这个替换你当前的视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1">