移动端网站右侧出现空白问题求助（PC端响应式模拟正常）

核心问题分析 #

真实移动设备右侧出现空白但模拟器正常，主要源于这几个问题：

1. 固定宽度容器（home-center和experience-center设为428px），当设备宽度小于该值时，容器会超出视口，触发横向空白/滚动。
2. 100vw会包含系统滚动条宽度，部分移动设备上会导致容器超出视口范围。
3. 超大字号文本（如156px）在小屏设备中可能超出容器宽度，撑开页面。

具体修改步骤 #

1. 替换固定宽度为相对宽度 #

将home-center和experience-center的固定宽度改为100%，并添加内边距避免内容贴边，同时通过盒模型确保内边距不增加元素总宽度：

.home-center{
    height: 100%;
    width: 100%; /* 替换原428px固定宽度 */
    padding: 0 20px;
    margin: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.experience-center{
    height: 100%;
    width: 100%; /* 替换原428px固定宽度 */
    padding: 0 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

2. 替换100vw为100% #

将背景容器的width:100vw改为width:100%，避免滚动条影响宽度计算：

.home-background{
    background-color: $light-blue;
    height: 746px;
    width: 100%; /* 替换原100vw */
}

.experience-background{
    background-color: $dark-blue;
    height: 1384px;
    width: 100%; /* 替换原100vw */
}

3. 优化超大字号文本 #

给大字号段落添加最大宽度和自动换行规则，防止文本溢出：

.home-center p{
    text-align: center;
    font-size: 156px;
    color: $white;
    font-weight: normal;
    font-family: $main-font;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

还可以用响应式字号适配不同屏幕，比如给经验模块的标题设置动态字号：

.experience-center p{
    font-size: clamp(40px, 18vw, 74px); /* 小屏最小40px，大屏最大74px */
    color: $white;
    font-weight: normal;
    font-family: $main-font;
    max-width: 100%;
}

4. 全局统一盒模型 #

在CSS最顶部添加全局样式，确保所有元素的内边距和边框不会撑开宽度：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

验证效果 #

修改完成后在真实移动设备上测试，右侧空白应完全消失，同时保持内容居中显示。

内容的提问来源于stack exchange，提问作者Paulo Cézar Sousa Paes