汇总 vue 移动端 苹果端和安卓端的兼容性问题

   项目中遇到的苹果safari不兼容的问题太多了.在这里整理一下.希望能帮助到在走弯路的人.

       1. 日期格式问题. 这个问题应该是遇到最多的.也是最多被熟知的.safari不识别2018-08-08的日期格式.会显示NaN.

         解决方式: 在处理日期之前转换为2018/08/08的格式.

       2. 设置了input背景颜色在safari颜色异常显示的问题. 这是由于safari对于input有默认的渲染背景颜色.必须把input原生颜色清除.否则会造成颜色显示特别不纯正.

        解决方式: 所有的input加上-webkit-appearance: none;属性.

       3. safari不兼容select居中属性text-align-last.

        解决方式: 

                     如果内容宽度固定:  这个如果你的select内的内容的宽度是固定的还好办.直接用空格或者padding就能解决.

                     内容宽度不固定: 比如你的select内可能显示1-100  也可能显示1000-2000   这个有点儿难办.因为你无法设置select的min-width. 我看了其他博客的建议解决方式.诸如虚拟一个span等方式.都无效. 我用的解决方式是js动态控制select的padding;  if判断哪个内容对应哪个padding;解决了safari不居中的问题.

       4. 苹果全面屏手机阻止浏览器事件.  比如我们在一个阅读页面需要实现点击出现header  ,  再点击隐藏.  这个在安卓手机上没问题.但是在苹果浏览器内,如果我们点击,此时苹果会优先弹出苹果系统的底部菜单.再点击一下,才出现我们的header.

         解决方式:  暂时无解.