# 移动端

跟移动端有关的一些资源与小技巧

# 经典的资料库

# 工具类网站

# 综合汇总

# 点击与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

# 锁定 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

# 禁止用户选中文字

-webkit-user-select:none

# 移动端字体问题

知乎专栏 - [无线手册-4] dp、sp、px傻傻分不清楚[完整] (opens new window)

上次更新: 2021-05-06