起手就被老板坑了

昨天开早会老板拍桌子说要做个手机版官网，下午就要原型。我心想这不扯么，硬着头皮打开VSCode新建文件夹，直接Ctrl+C了桌面端网页的HTML文件。

当场翻车实录

手机预览那刻我差点把咖啡喷屏幕上：文字挤成二维码，导航栏叠叠乐，图片撑破屏幕像发面馒头。手忙脚乱开控制台，发现桌面CSS全废了，媒体查询写得跟草稿纸似的。

• 先塞了行viewport救命：这行字不写，手机直接按桌面尺寸缩放
• 抓狂改单位：把px全换成rem，基准字体设成62.5%偷懒
• 用flex布局替换float，按钮再漂移就剁手

点不着的按钮要人命

自以为搞定了，结果测试同事举着iPhone怒吼："订阅按钮老子戳了十次！"。原来那破按钮才30px宽，正常人手指根本瞄不准。赶紧把所有点击区域调到48px以上，顺手加了反馈动效——现在点按钮会变色，像戳了青蛙肚皮。

安卓苹果打架现场

• 华为手机里输入框自动放大，页面直接崩成马赛克
• iOS死活不认-webkit-tap-highlight-color，点了链接像没点
• 用@media(hover:hover)给桌面加悬浮效果，手机才不会触发

终极踩雷王

上线前用旧安卓机测试，加载动画居然卡成PPT。查半天发现是CSS阴影写太嗨，中低端机直接躺平。连夜把box-shadow删光，换成边框描边；渐变背景图切碎成纯色块，这破手机才吭哧吭哧跑起来。

现在你们看到的官网，电脑看像精装修，手机看像出租屋——但好歹能用。老板问我为什么旧款红米还会闪退，我指着窗外外卖小哥的手机："您知道现实世界里还有人用着五年前的小米4吗？"