已设置html宽高100%，body无法铺满整页，移动端与PC端异常如何解决

核心问题原因 #

• 未清除浏览器默认给html、body添加的8px外边距，会导致body比视口小一圈
• 仅给html设置了100%宽高，body没有配置对应宽高属性，无法继承html的高度撑满视口
• 移动端页面未添加viewport元标签，浏览器会自动缩放页面适配屏幕，出现内容缩小的问题

具体修复步骤 #

1. 在HTML的<head>标签内添加viewport元标签，解决移动端缩放问题：

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

2. 修正CSS代码，补全全局样式重置和body宽高配置：

/* 全局样式重置：清除默认边距、统一盒模型计算规则 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
    width: 100%;
}
body {
    width: 100%;
    /* 用min-height适配内容不足一屏和超出一屏的两种场景 */
    min-height: 100%;
    background-color: #1c1c1c;
    /* 补充字体降级方案，避免外部字体加载失败后显示异常 */
    font-family: 'Press Start 2P', cursive, monospace, sans-serif;
}

如果不需要兼容IE11等极老浏览器，可以直接给body设置min-height: 100vh，省去给html设置高度的步骤，效果完全一致。

其他可优化点 #

• 给body添加overflow-x: hidden，避免移动端因元素溢出出现不必要的横向滚动条
• 引入Press Start 2P字体时添加font-display: swap属性，避免字体加载过程中页面文字空白
• 所有可点击的交互元素统一添加cursor: pointer，提升用户交互感知
• 如果页面有大量像素风格素材，可以添加image-rendering: pixelated属性，避免图片缩放后模糊

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