今天遇到件离谱事儿。上午十点多钟，公司群里突然炸了锅。运营小张发来十几张截图，全是用户投诉官网变形的，安卓机子上图片撑爆屏幕，苹果这边按钮直接叠罗汉了。
一、当场抓妖现场
我抄起手边的小米10按开官网，首页轮播图直接冲出屏幕边框，右边半拉图全被吃了。切换到iPhone 15 Pro max，好家伙！两个充值按钮叠得跟汉堡包似的，根本没法点。转头问技术部老李：“你们上周改样式了？”老李从显示器后面探出头：“就加了俩活动按钮，本地调试明明没事儿！”
掏出真机开测：- 华为Mate60：轮播图右侧撕裂
- 三星S23：登录框撑破容器
- iPhone 13：底部按钮集体漂移
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
二、苹果机现原形
打开苹果模拟器检查css，发现苹果对viewport的初始缩放比例有自己想法。在<head>里补了这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">刷新后苹果按钮叠罗汉倒是解开了，安卓那边图片撕裂反而更严重了！这时候美术妹子路过飘来句：“你们在玩大家来找茬？”
三、安卓机妖风阵阵
下午两点啃着面包看代码，发现安卓弹出键盘时页面高度被暴力压缩。用CSS视口单位vh写的元素集体乱窜，改代码时手滑把：
换成：
height: 100%;min-height: -webkit-fill-available;
还没等我喝口水，运营又在群里嚎：“华为浏览器图片成俄罗斯方块了！”
四、终极收妖大法
抱着三台测试机折腾到下午茶时间，发现关键在图片响应式代码。把：
<img src="*">改成：
<img src="*" style="max-width:100%; height:auto">顺手给按钮套上flexible父容器。五点整全组人举着手机刷新页面，苹果安卓终于显示同一幅画面了。下班前测试组老王幽幽吐槽：“早该料到这游戏叫捉妖物语，连官网都自带妖气。”明儿把这两招写成组件库，下次再逮着其他妖孽直接贴符！
