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

instead of using fixed padding in #loading-message use padding with percentage also use max-width and min-width properties instead of fixed width in #loadingBar and #loading-message. your iphone has about 400px width and you defined 100px padding and width of 350px. on big screens it's no problem but in your iphone it will always load with blank space on right side.

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

also u can use media queries... media queries