2012-10-15 60 views
0

我希望這個圖像在html標籤中只填充320px的最大寬度,就像它應該的那樣。然而,它超越了這一點。水平滾動條顯示和圖像瓷磚多166個像素。在IOS模擬器和我的ipone中所有其他元素正確地跨越寬度。媒體查詢不適用於iphone寬度320px

@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; 
} 
+0

它的背景圖像,所以它不能導致滾動條問題。請發佈完整的相關代碼... – Giona

+0

感謝您的回覆,我添加了一些代碼,希望它很簡單! –

回答

0

您應該設置width屬性

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

width: 320px; 

} 
+0

感謝您的回覆,但這並不奏效。 –