Question

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

正如您所看到的，它会调整大小并按比例缩放到浏览器窗口，但是在移动设备上，背景图像不会缩放，徽标和导航仅在横向视图中完全显示。

@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

尝试用以下代码替换当前的视口：

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

背景图像没有缩放到手机。

1 个答案: