如何限制HTML文档宽度不超出移动设备屏幕？游戏Demo适配问题

1. 修正Viewport标签配置 #

确保viewport标签正确锁定视口宽度，避免浏览器自动缩放：

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

仅设置width=100%可能无法覆盖移动端浏览器的默认行为，加上initial-scale和禁止缩放能强制页面适配设备宽度。

2. 强制图片适配容器宽度 #

即使图片看似被容纳，其原始尺寸可能隐性撑大容器，给所有图片添加全局样式：

img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片默认行内间距 */
}

同时检查图片所在的父容器，确保没有设置固定宽度或min-width超出视口范围，必要时给容器添加：

.container {
  width: 100%;
  max-width: 390px;
  overflow: hidden; /* 截断超出容器的内容 */
  margin: 0 auto; /* 居中显示（如果需要） */
}

3. 锁定根元素的横向溢出 #

给html和body添加样式，防止页面整体横向滚动：

html, body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

这能避免任何隐性元素超出视口时拉宽整个页面。

4. 排查异常元素 #

用移动端Chrome远程调试功能，查看页面中实际宽度超出视口的元素：

• 连接手机到电脑，打开Chrome DevTools的「远程设备」面板
• 选中当前页面，在Elements面板中逐个检查元素的offsetWidth，找出宽度异常的元素（比如设置了min-width: 1000px的隐藏元素）

5. Safari兼容处理 #

Safari对某些CSS属性的解析有差异，可添加以下样式优化：

* {
  box-sizing: border-box; /* 确保内边距和边框不增加元素总宽度 */
}

避免使用可能导致计算错误的宽度单位（如未正确适配的vw），优先使用百分比或固定最大宽度。

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