今天想试试那个经典Flash游戏七宗罪的HTML5版本，结果在手机浏览器打开官网直接乱码，连按钮都戳不到。
发现问题
掏出我的安卓机点开官网，好家伙！整个页面挤在屏幕左上角，字小得要用显微镜看。试着手动放大屏幕，结果游戏框直接跑出屏幕外边了，右侧内容根本拖不过去。
动手调试
先用浏览器自带的开发者工具检查，发现这页面压根没做移动端适配。最关键问题是少了这行代码：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 用电脑打开网页源代码
- 翻到标签里面
- 果然没有viewport元标签
当场打开手机上的HTML编辑器，在
里面加了段代码：- <meta name="viewport" content="width=device-width, initial-scale=1.0">
意外翻车
满心欢喜刷新页面，布局是正常了，但新bug来了：虚拟键盘把游戏操作区全挡住了！手指要往上滑半天才能点到技能按钮。
折腾半小时发现解决方案：
- 找到游戏canvas画布的CSS样式
- 把高度单位从px改成100vh
- 加上最大高度限制
终极适配
测试时又发现横屏模式下界面错位：
- 用@media screen锁定竖屏显示
- 加了醒目的"请旋转手机"提示图
- 把操作按钮间距拉大三倍
测试红米Note和iPhone13都能流畅操作，连老爷子那台老荣耀都能玩。
蹲坑时突然想起来：去年给公司做H5活动页也是这毛病。当时甲方急得要命，我趁着午休改了两行viewport代码交差，结果被当成技术大牛多发了五百块奖金。所以你说前端这活儿，有时候真就看谁记得住这个破标签...
