移动web开发的一些坑
类似的题目一搜一大堆,我就不再写那些meta标签类似的内容了,记录一下自己实现中遇到的问题,如果能帮到你,那再好不过了。
- 1px border的问题,大家能搜到很多方案,但如何选择还是要根据实际情况,比如border-image不能处理圆角,最好用的transform scale可能会因为改变布局导致某些区域不可点。
- 小于12px的文字的居中问题:完美解决移动Web小于12px文字居中的问题
- 注意3d加速的使用 -webkit-perspective and -webkit-backface-visibility:移动Web轮播图IOS卡顿的问题
- 如果transform或者动画引起文字锯齿或者其他的元素闪烁,也可以试试:-webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;
- background-image属性有些手机出现了莫名其妙的横线,使用background-size: 100% 100%;可解决, contain和cover都没用。
- 点击穿透的问题,个人感觉最简单粗暴的方式还是直接改为click。。
- android手机按钮长按会出现橘黄色的背景和边框,直接用span或者p之类的标签模拟按钮。
- 如果要兼容到android2.3, 需要额外处理很多事情。比如transform、border-radius以及document.documentElement.clientWidth获取宽度(可使用window.innerWidth),如何判断系统低于2.3看完美解决移动Web小于12px文字居中的问题。
- 移动端屏幕适配:再谈移动端Web屏幕适配
易信4.0终于上线,大家可以体验一下。我在其中贡献了公众号精选页面,是客户端新增的部分,基于webview实现,效果是这样的:
现在没事就看看自己的页面,一方面经常推送优质内容, 一方面害怕出bug。。。囧
这次还使用了regular, 我厂内已经广泛使用,体积小使用简单。
唉, 怎么看怎么像一篇广告。