手机端布局一般有：rem布局、百分比布局、媒体查询、弹性盒布局等
在公司接到的新需求：公司公众号需要接入提现接口，需要切一个提现页面。我脑子快速闪过用百分比布局。很快…效果就出来了，提现页面始终垂直居中，经过多方测试，本以为圆满完成任务了。
很开心的就上线了，然后UI小姐姐很开心的说我要做第一个使用这个提现接口的用户，刚好我账号有钱。
然而…尴尬的事情出现了，UI小姐姐的手机居然没有适配，提现框框溢出手机屏幕可视区域了，还上下左右都出现了滚动条。
急忙叫部门各个小哥哥去测试这个样式布局，经过各式不同牌子手机的使用，最终发现所有v i v o 手机都没有适配。完了，这个牌子走的路线可是农村包围城市啊，用户贼广。这个bug得赶快解决。
不死心的我为了看看是不是只有这个牌子，还特地找了用他的兄弟牌子手机的朋友测试了一番，也木有问题。看来问题是只出现在它身上了。
然后…疯狂改样式中。百分比布局各种调试，不行。下定决心换血，换成了flex布局，总不能还不适配吧。然后好自信的一女的拿手机一测试，贼尴尬，还是溢出…
这个时候就需要度娘上线了，一百度一大堆都说是低配手机不能适配新版的flex布局，好尴尬，又加了各种兼容性写法
display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
再试一次还是溢出状态。
然后也许是子元素的问题
然后加了
flex-shrink：1；
本以为问题可以解决了。然而还是我太天真。
这时候就要祭出杀手锏了，那就老一套rem布局吧，总不能还有问题吧。
但是其实还是不知道为何百分比布局和flex布局这两个比较好的布局方式问题究竟出在哪里，但是老板急着要我把这个小页面上线，也没时间去细细的琢磨了，保住工作重要。然后我就换成了老一套rem布局。
本以为这一次总能安心上线了吧。没有想到的是，居然还是溢出状态，那一刻我想死的心都有了，但是…自己写出来的bug，跪着也要找出来。
一直疯狂找Ing…
然后在想是不是哪里有什么问题，先把js都注释掉看看。然后…奇迹出现了，问题居然出现在js里面。
rem布局必配的meta标签
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp" />
以及
// 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
var scale = 1 / window.devicePixelRatio;
var mstr = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
document.getElementById("vp").content = mstr;
把这两个去掉，再在某牌子手机上测试，居然没问题了。当时内心一万条MMP跳过。
总之总算是找到了问题所在，不至于一头雾水。
把遇到的坑总结一下还是很有必要的，铭记一下自己的愚蠢。自己造出来的bug还是得迅速的找出来才行。