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 有大约 400 像素的宽度，你定义了 100 像素的填充和 350 像素的宽度。在大屏幕上没问题，但在你的 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？

尝试使用宽度。