爲什麼此代碼在iPhone上右側的空白區域加載？

因此，在縱向和橫向上，右側30％左右的屏幕只是白色，僅限iPhone和其他小型屏幕，就好像寬度小於100％。這裏是我的HTML：爲什麼此代碼在iPhone上右側的空白區域加載？

<div id="loading"> 
<div id="loading-message"> 
    <p>Please enable Javascript to view this site.</p> 
    <p class="tar">-Thanks</p> 
</div> 
<div id="loadingBar"> 
    <div id="loadingBarInner"></div> 
</div> 
</div>

和有關CSS：

#loading { 
background: gray; 
width: 100%; 
position: absolute; 
height: 1800px; 
box-shadow: inset 0px 0px 500px black; 
} 
#loading-message { 
margin: auto; 
border-radius: 30px; 
padding: 100px; 
box-shadow: 0px 0px 50px 10px black; 
width: 300px; 
margin-top: 200px; 
font-size: 30px; 
font-weight: bold; 
} 
#loadingBar { 
margin: auto; 
width: 350px; 
height: 30px; 
margin-top: 300px; 
border-radius: 5px; 
border: 2px solid black; 
padding: 2px; 
} 
#loadingBarInner { 
background: #6d0019; /* Old browsers */ 
height: 30px; 
width: 0px; 
border-radius: 5px; 
}

來源

2012-12-26 dezman

你有固定的loadingbar和加載按摩的div的寬度，你的iPhone已經不太寬，我認爲，這就是爲什麼有右邊的空白處 – xurca

那麼你認爲解決方法是什麼？ – dezman

，而不是使用固定填充在＃裝載的消息使用填充與百分比也使用最大寬度和最小寬度屬性，而不是在 固定寬度#loadingBar和＃裝載消息 。你的iphone有大約400px的寬度，並且你定義了100px的填充和350px的寬度。在大屏幕上，這是沒有問題的，但在你的iPhone上它總是會加載右側的空白空間。

#loading { 
background: gray; 
width: 100%; 
position: absolute; 
height: 1800px; 
box-shadow: inset 0px 0px 500px black; 
} 
#loading-message { 
margin: 0 auto; 
border-radius: 30px; 
padding: 10%; 
max-width:300px; 
min-width:50px; 
box-shadow: 0px 0px 50px 10px black; 
margin-top: 200px; 
font-size: 30px; 
font-weight: bold; 
} 
#loadingBar { 
margin: auto; 
max-width:300px; 
min-width:50px; 
height: 30px; 
margin-top: 300px; 
border-radius: 5px; 
border: 2px solid black; 
} 
#loadingBarInner { 
background: #6d0019; /* Old browsers */ 
height: 30px; 
width: 0px; 
border-radius: 5px; 
}

也ü可以使用媒體查詢... media queries

來源

2012-12-26 18:56:18 xurca

-1

你有什麼iPhone？

試着玩寬度。

來源

2012-12-26 16:33:54

它的iPhone4。 – dezman

嘗試玩寬度。 –

難以回答嗎？ – sooper

爲什麼此代碼在iPhone上右側的空白區域加載？

回答

相關問題