为什么在我的主web容器上设置宽度为100%在移动设备上创建水平滚动条?

Question

#main {
width: 100%;
border: 0;
}

我的手机页面有这个。但是它创建了水平滚动条。为什么?

我尝试了html/body上的overflow: hidden技巧，但是这给我弄乱了其他东西。

有没有办法只是简单地设置宽度为100%，实际上有宽度正好是100%，而不是更多?

Answer 1

如果没有为移动设备制作的网站，移动设备通常会尝试显示整个桌面版本的网站。这取决于你其余内容的大小是基于什么。如果你有基于像素的绝对大小，你的内容将不会随着大小而改变。

@media (min-width: 764px) {
#main {
}        
}

在这种情况下，媒体约束通常会有所帮助。您需要根据屏幕的宽度更改其他绝对值。

这也可能是有用的:移动设备上的响应式css样式