[转]汇总搞移动端遇到掉进去的坑,以及脱坑的方案


Flex兼容

Flex想要兼容众多花样式手机,要注意以下这么些

  • 前缀要考虑2009~2012年的语法[webkit-box,flex,flex-box]
  • 少用复合属性,比如flex:1,考虑兼容理应拆成[flex-grow,flex-shrink,flex-basis];flex-flow拆开成[flex-direction,flex-wrap]

这些前缀很少手动去写,一般都用构建工具处理,我用的是gulp+autoprefixer来处理,这里我的处理范围

值的一提的是,添加前缀并不是万能的,有些国内的手机就不吃这一套了,今天小伙伴就遇到了;华为的一款手机不支持常规的flex写法。。。最终是原因是不能用行内元素,要改成block元素才能支持flex

2016-8-11 update: 使用flex:1的子元素,切记要增加width:0% .. 有些Android不带这个很奇葩【错乱】,且不要使用margin:0 auto【作用于子元素】


IOS的H5页面scroll不流畅解决方案

在滚动包裹层添加这么一条私有前缀样式即可享受类似APP的滑动效果,不仅丝滑,还带弹性!


IOS 遮罩层较好方案

拒绝采用fixed!!!!!

遮罩层采用position:absolute来置顶,内部元素采用flex来布局;
这种写法可以避免一大堆天坑!!!

若是实在不信邪,滚动的时候,微信端这些你就会感受到花儿为什么这样红了。。。


IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复

这个方案是通过计算离底部多远加状态来阻止touch事件


ios和android下触摸元素时出现半透明灰色遮罩


IOS 默认输入框内阴影重置


旋转屏幕时,字体大小调整的问题


默认启用GPU渲染页面

这个具体要看你的实际作用范围,无非就通过一些特殊属性来强制开启
transform:translateZ(0): Z轴会启用GPU,请自行带前缀
– 调用preserve-3d或者animation也会


transition闪屏


placeholder的颜色值改变


移动端禁止选中内容


IOS禁止保存或拷贝图像


常用的移动端meta


IOS中input键盘事件调用缓慢

直接改为监听input事件


页面高度渲染错误


怪异悬浮的表单

在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单,经过观察与测试发现只有input:password类型的输入框存在,那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。


其他一些建议

  • 能用transform实现的过渡的,可以不考虑animation实现;animation在部分机子过渡非常掉帧,体验非常糟糕,,遇到过好几次
  • 页面有滚动区域的建议引入iscroll5,可以避免很多天坑
  • 页面应该尽可能的减少复杂的DOM【一个功能点,DOM结构越直白,越好维护】,复杂DOM会增加维护难度
  • 考虑移动端响应布局,建议引入阿里巴巴出品的lib-flexible , IOS动态调整DPR,其他设备默认DPR1
  • 点透事件可以引入fastclick或者不用click,改为touch来写,亦或者引入zepto的tap事件

若是以后还有遇到哪些奇葩坑,爬出来了会继续更新此帖子

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/272
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论