如何调整CSS实现移动端正常模式网页显示适配，匹配移动端桌面模式效果

修复方案 #

• 第一步：在页面<head>标签内添加移动端适配必需的viewport元标签，缺失这个标签会导致移动端默认按桌面端宽度缩放页面，就是你看到的正常模式显示异常、桌面模式反而正常的核心原因：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 第二步：修复移动端视口高度适配问题，原生100vh在移动端会包含浏览器地址栏、工具栏的高度，实际内容会被挤出可视区域，替换高度配置为动态视口高度并加兼容回退：

min-height: 100vh; /* 兼容旧浏览器 */
min-height: 100dvh; /* 现代移动端动态视口高度，自动排除系统UI占用 */

• 第三步：给flex容器增加宽度限制，避免内容水平溢出：

width: 100%;
max-width: 100vw;
overflow-x: hidden;

• 第四步：给字体增加最小尺寸限制，避免小屏设备字体过小：

font-size: max(calc(10px + 2vmin), 16px);

调整后完整CSS代码 #

text-align: center;
background-color: #282c34;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
font-size: max(calc(10px + 2vmin), 16px);
color: white;

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