工作笔记-关于安卓和ios兼容
一、移动端开发，客户端的键盘bug
现象：当用户点击卡面的按钮，弹出密码验证框和客户端键盘，此时点击验证框的按钮，ios的弹窗和键盘消失，然而并无其他事发生。
bug定位：安卓功能完好，ios出现，所以采用打印的法式看js逻辑走向，发现前端的点击事件逻辑并未触发。猜想，也就是说看似点了确定按钮，却没点上去，但是又触发了隐藏键盘和键盘的事件。想到vant组件的vantActionSheet组件有点击弹窗外遮罩层会隐藏弹窗的事件，便在此事件上做了打印，发现正是此时触发了。所以定位bug在ios客户端的密码键盘自带一层遮罩层，或者点击非键盘区域会隐藏键盘触发相同的点击遮罩层事件。
解决：开始想让客户端做这个键盘不要有点击非键盘区域触发任何方法。但考虑其他场景有可能需要此功能。前端最后尝试采用延时的方法，键盘隐藏效果触发时（键盘隐藏触发前端js，前端动态去掉下边距，让验证框触底），弹窗50毫秒延时仍旧停留此处，此刻的点击事件就做用到了点击按钮身上。
二、移动端开发，设置卡片阴影，ios不生效
现象：设置卡片阴影，前端用了box-shadow:0 8px 16px 0 rgba(56,58,63,0.04)安卓显示阴影，ios不显示阴影。
bug定位：绝对的是兼容问题。
解决：在百度搜索，进行尝试，发现增加以下代码可行。-webkit-appearance:none;-webkit-box-shadow:0 8px 16px 0 rgba(56,58,63,0.04)
三、移动端开发，vue设置页面背景色，安卓生效，ios不生效
现象：前端在vue中设置了<style>html,body,#app{ height:100%; background-color:#F4F5F8;} </style>在安卓客户端的页面背景色和ios客户端的页面背景色显示不一致。
bug定位：考虑是兼容问题，度娘上搜了一通并无此方面的相关知识，安卓客户端和ios客户端也能设置背景色，所以猜想只是代码和公司的客户端老师写的代码有了冲突。
解决：我先把背景色写成蓝色，明显的区分安卓生效，ios没生效的问题（因为#F4F5F8这种是一种浅灰色，ios客户端写的默认全局背景色也是灰色，不明显）。先加了最高权重尝试覆盖ios老师代码写的背景色<style>html,body,#app{ height:100%; background-color:#F4F5F8!important;} </style>
一下就成功了，证明了自己猜想是正确的，如果解决不了，后续会请教ios客户端老师帮忙审查。
