我有一个基于 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;
}
最佳答案
尝试用这个替换你当前的视口(viewport):
<meta name="viewport" content="width=device-width, initial-scale=1">
关于css - 背景图像未缩放到手机。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22359653/