媒體查詢不適用於iPhone寬度320px

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

您應該設置width屬性

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

width: 320px;

}