# 移动端
跟移动端有关的一些资源与小技巧
# 经典的资料库
# 工具类网站
- HTML5 与 CSS3 技术应用评估 (opens new window)
- 各种奇妙的hack (opens new window)
- ios端移动设备参数速查 (opens new window)
- iPhone 6 屏幕揭秘 (opens new window)
# 综合汇总
# 点击与click事件
对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒(300ms)延迟。
在移动浏览器中对触摸事件的响应顺序应当是：ontouchstart -> ontouchmove -> ontouchend -> onclick
使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下：
-webkit-tap-highlight-color: rgba(0,0,0,0);
# 长网页滑动卡顿处理
body {
height: 100%;
overflow: scrool;
-webkit-overflow-scrolling: touch;
}
1
2
3
4
5
2
3
4
5
# 锁定 viewport
ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。
禁止body滚动：document.body.ontouchmove=function(e){ e.preventDefault(); }
# 性能优化维度
# 技术相关
- 离线缓存
- css优化【3d动画优化】
- js优化 【js worker】
- spdy,http2
- service worker
- 入口dns预解析
- 域名收敛
- cookie压缩
- 网速及网络情况侦测
- webp
# 策略相关
- 前端资源压缩去重
- 首屏前置与资源lazyload
- 页面模板与数据分离
- 适当的base64,首屏css不建议使用
- script 异步
- 后台智能加载下一页
- 图片渐进显示
# 消除transition闪屏
两个方法：使用css3动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。
-webkit-transform-style: preserve-3d; /设置内嵌的元素在 3D 空间如何呈现：保留 3D/
-webkit-backface-visibility: hidden; /（设置进行转换的元素的背面在面对用户时是否可见：隐藏）/
1
2
2
# 禁止用户选中文字
-webkit-user-select:none