Question

我希望html标签中的这个图像只填充320px的最大宽度，就像它应该的那样。然而，它超越了这一点。水平滚动条显示166个像素的图像切片。在IOS模拟器和我的ipone中所有其他元素都正确地跨越宽度。

@media only screen and (max-width : 320px) {
html {
margin:0; 
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
}

更新：这些是一些可能相关的标签。

#band1 {
position: absolute;
top:0;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}

.barbLogo {
position: absolute;
top:3px;
margin-left:165px; 
width:320px;
}

#band2{
position: absolute;
top:-75px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}

#gridBgContainer{
position: absolute;
margin:0;
top:50px;
left:0;
height:200px;
background:url('../_images/gridBg.png');
background-repeat: repeat;
display: table;
z-index: 1;
}

#wrapper {
position: relative;
top:0px;
left:0;
right:0;
margin: 0 auto 0 auto;
width:100%;
text-align: center;
z-index: 3;
}

#socialLinks {
position: absolute;
margin-top: 14px; 
float:right;
right:0px;
}

#top-menu {
position: absolute;
top:0px;
left: 0px;
width:320px;
z-index: 100; 
}

section#homeContent {
position: absolute;
top: 400px;
width:320px;
z-index: 10;
}

section#faqContent {
position: absolute;
top:900px;
width:320px;
z-index: 10;
text-align:left;
}

footer {
position: absolute;
font-size: 1.15em;
top: 1230px;
padding: 0 1% 0 1%;
width: 100%;
height: 75px;
text-align: center;
z-index: 10;
}

.footer{
text-align:center;
padding: 2% 0 0 0;
}

#band3{
position: absolute;
top: 1255px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png')repeat-x;
z-index: -1;
}

Answer 1

你应该设置宽度属性

@media only screen and (max-width : 320px) {
html {
margin:0; 
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;

width: 320px;

}

媒体查询不适用于iphone宽度320px

1 个答案: