html - このコードがiPhoneの右側に空白で読み込まれるのはなぜですか？

Question

したがって、縦向きと横向きの両方で、画面の右30％程度が真っ白になり、iPhoneやその他の小さな画面でのみ、幅が100％未満であるかのようになります。これが私のHTMLです：

<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;
}

Answer 1

#loading-messageで固定パディングを使用する代わりに、パーセンテージでパディングを使用し、 #loadingBarおよび#loading-messageで固定幅の代わりに max-width および min-width プロパティを使用します。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;
}​

また、メディアクエリを使用できます... メディアクエリ

Answer 2

どんなiPhoneを持っていますか？

幅で遊んでみてください。