移动端常见知识点总结

1、获取位置

HTML5地理位置API,允许js程序向浏览器询问用户的真实信息,移动端使用GPS获取的位置,非常精准。但是地理位置API的浏览器访问前总是会询问是否同意,如果同意的话就会获取到位置,否则获取不到。

geolocation对象获取位置的方法:

  • getCurrentPosition - 获取一次位置信息。
  • watchPosition - 监听当前位置,位置改变之后就会执行函数
  • clearWatch - 清除 watchPosition

具体获取用户位置代码如下:

移动端常见知识点总结

位置获取成功后返回的 success.coords 的属性及意义如下:

  • coords.latitude - 纬度
  • coords.longitude - 经度
  • coords.altitude - 海拔
  • coords.speed - 速度
  • coords.accuracy - 经纬度精度
  • coords.altitudeAccuracy - 海拔精度
  • coords.heading - 方向,从正北开始的弧度数

2、摇一摇

微信活动页面经常有“摇一摇,拿好礼”,还有拼多多摇现金,摇一摇功能也非常常见。HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。

devicemotion 监听手机加速度变化的事件:

  • acceleration - 加速度
  • accelerationIncludingGravity - 重力加速度
  • rotationRate - 旋转速度
  • interval - 获取的时间间隔

摇一摇代码示例:

移动端常见知识点总结

3、判断手机类型

移动端常见知识点总结

4、检查浏览器类型

移动端常见知识点总结

移动端浏览器也有很多,制作广告插件的同学,天天面对的是不同浏览器屏蔽广告,所以需要研究每个浏览类型。写插件的时候经常需要根据不同浏览器单独处理某些元素。

5、拍照

由于调用摄像头有使用权限,只能在本地运行,线上运行需要使用 https 域名才可以使用。网页内调用摄像头拍照。目前浏览器提供了API能够直接访问用户媒体设备(摄像头、麦克风)。

navigator.mediaDevices.getUserMedia

作用:为用户直接提供直接连接摄像头、麦克风的硬件设备接口。

 移动端常见知识点总结

constraints 为音频和视频指定参数 ,如:


6、打电话

网页信息中基本都有联系电话号码,联系我们等按钮,在移动端经常需要加入拨打电话功能,这样用户只要点击一下就可以拨打电话了。

使用代码如下:

移动端常见知识点总结

以下两种方法亲测无效:

  • <a href="wtai://wp//mc;10086">拨打10086 </a>
  • <a href="dc:5040*0077">拨打热线</a>

7、发短信

想要实现在网页上点击快捷发送短信功能,此时安卓和ios写法相同,但是结果却不同。

移动端常见知识点总结 

 

安卓手机:点击之后直接就可以把 TD 作为内容,直接发送到10010。

ios手机:点击之后电话号码变成 10010?body=TD 。

测试各种机型,无法兼容所有,最后去掉内容,只保留电话号码。

上一篇:【Rust】泛型空约束


下一篇:HTML5(二)——获取用户位置Geolocation