移动端CSS页面BODY宽度超出预期问题的修复方案

移动端显示异常核心有三点：

• 页面缺失移动端视口配置，移动浏览器默认按桌面端宽度（通常980px）渲染页面后再缩放，直接导致布局错位
• 所有内部容器都写死了固定像素宽度（最宽达到960px、728px），.mainFrame没有设置宽度约束，当视口宽度小于内部固定宽度时，内容会溢出容器，白色背景无法完全包裹内容，深色body背景就会直接大面积露出
• 之前修改width:100%没生效，是因为没有解决视口缺失、内部固定宽度元素溢出的底层问题

1. 添加移动端视口配置 #

在<head>标签内、<style>标签前加入以下meta标签，这是移动端适配的基础配置，告诉移动浏览器按设备实际宽度渲染页面，禁止默认缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 调整.mainFrame样式 #

替换原有.mainFrame的CSS代码，给容器设置最大宽度，同时保证小屏下自动撑满，边框不会额外撑大容器：

.mainFrame{
    width: 100%;
    max-width: 980px; /* 匹配内部最宽元素尺寸，留少量边距 */
    min-height:100%;
    box-sizing: border-box;
    background: white;
    border: 5px solid #CCCCCC;
    margin:0 auto;
    overflow-x: hidden; /* 拦截内部元素溢出 */
}

同时删除原有冗余代码html>body .mainFrame {width:auto; height: auto;}，避免覆盖新的宽度配置。

3. 追加小屏适配规则 #

在原有CSS代码末尾追加以下媒体查询规则，让小屏下所有固定宽度的容器自动适配屏幕宽度，导航标签均分宽度不折行：

@media screen and (max-width: 980px) {
    .logosmallContainer,
    .logosmallContainer1,
    .jobtabs,
    .upperTabs,
    .lowerTabs,
    .vMsg2,
    .vMain,
    .vMainJobs,
    .pgn1,
    .ad728Y {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .uprTabs, .lowrTabs {
        width: calc(100% / 6);
    }
    .uprTabs a, .lowrTabs a,
    html>body .uprTabs a,
    html>body .lowrTabs a {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box;
    }
}

• 桌面端：完全保留原有显示效果，白色mainFrame容器居中，深色body作为细外框，所有内容都在容器内展示
• 移动端：自动适配设备屏幕宽度，不会出现内容溢出、白色背景包裹不全的问题，导航标签自动均分宽度不会错位

内容的提问来源于stack exchange，提问作者Quest