移动端开发
移动设备忽略ios将页面中的数字识别为电话号码的方法
在<head></head>
中加入
<meta name="format-detection" content="telephone=no" />
移动端手势事件
- touchstart 当手指触摸屏幕时触发
- touchmove 当手指在屏幕滑动时不断的触发
- touchend 当手指从屏幕上移开时触发
- touchcancel 当系统停止跟踪触摸时触发
PWA
https://segmentfault.com/a/1190000012353473?utm_source=tag-newest
PWA全称Progressive Web App,即渐进式WEB应用。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题?
- 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
- 实现了消息推送
它解决了上述提到的问题,这些特性将使得 Web 应用渐进式接近原生 App。
PWA的优势
- 可以将app的快捷方式放置到桌面上,全屏运行,与原生app无异
- 能够在各种网络环境下使用,包括网络差和断网条件下,不会显示undefind
- 推送消息的能力
- 其本质是一个网页,没有原生app的各种启动条件,快速响应用户指令
PWA存在的问题
- 支持率不高:现在ios手机端不支持pwa,IE也暂时不支持
- Chrome在中国桌面版占有率还是不错的,安卓移动端上的占有率却很低
- 各大厂商还未明确支持pwa
- 依赖的GCM服务在国内无法使用
- 微信小程序的竞争
尽管有上述的一些缺点,PWA技术仍然有很多可以使用的点。
- service worker技术实现离线缓存,可以将一些不经常更改的静态文件放到缓存中,提升用户体验。
- service worker实现消息推送,使用浏览器推送功能,吸引用户
- 渐进式开发,尽管一些浏览器暂时不支持,可以利用上述技术给使用支持浏览器的用户带来更好的体验。