浏览器和设备之间还有很多有趣的接口,

1.屏幕朝向接口

浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏。

(1)使用css媒体查询的方法

/* 竖屏 */
@media screen and (orientation: portrait) {
div{
width: 100%;
}
} /* 横屏 */ @media screen and (orientation: landscape) {
div{
height: 100%;
}

(2)利用js调用屏幕朝向接口

screen.addEventListener("orientationchange", function () {
console.log("屏幕的方向是: " + screen.orientation.angle);
});

例子:demo

2.设备朝向接口

通过这个接口可以监听设备朝向及旋转,以便自动调节放心,这个接口有两个:

(1) DeviceOrientationEvent:监听方向变化

window.addEventListener("deviceorientation", operate, true);

operate会接收一个对象,对象含有4个属性分别是:

function opertate(orientData) {
var absolute = orientData.absolute;
var alpha = orientData.alpha;//z轴上的旋转角度(0~360)
var beta = orientData.beta;//x轴的旋转角度(-180~180)
var gamma = orientData.gamma;//y轴上的旋转角度(-90-90)
}

  

(2) DeviceMotinEvent:监听加速度变化

window.addEventListener("devicemotion", operate, true);

operate同样会接收一个对象,有4个属性

acceleration 和 accelerationIncludingGravity都是去除重力后的加速度,包括3组数据
x: 左向右
y: 下到上
z: 垂直地面 rotationRate包含3组数据: alpha:垂直旋转速率
beta: 左至右的轴的旋转速率
gamma: 从下至上方向的轴的旋转速率 intervali:i是从设备获取数据的频率(ms)

利用以上的api我们可以监听设备的移动方向,从而做出更加具有交互感的h5页面和游戏。

例子:demo

3.地理位置接口(https)

浏览器可以直接获取到用户的地理位置接口,返回用户的经纬度,拿着这个经纬度可以到百度或者腾讯地图开发的接口去查询用户的位置,

为了安全考虑,使用这个接口之前会先征求用户的许可。

但是现在限制只能在https的链接中使用,安卓的微信中还可以继续使用,但是ios10中也要求必须是https。

navigator.geolocation(succ,error,option); //这个接口异步获取用户的地理位置

(1)获取成功之后调用第一个参数定义的succ函数,

(2)如果调用失败则调用第二个参数定义的error函数,并返回错误代码error.code 和error.message

error.code:1  用户拒绝显示位置
error.code:2 获取位置失败
error.code:3 请求超时
error.code:4 未知错误

(3)option:可选,用来设定是否获取高精度定位,等待请求时间和最长定位缓存时间。

var option ={
  enableHighAccuracy:true,
  timeout:1000,
  maximumAge:0
}

l

navigator.geolocation.getCurrentPosition(function(position) {
  alert(position.coords.latitude, position.coords.longitude);//获取纬度、精度
});

地理位置还有一个接口:navigator.geolocation.watchPosition(succ,error,option);//监听用户的位置

这个接口会在用户位置变化时,自动调用。

var watchID = navigator.geolocation.watchPosition(function(position) {
alert(position.coords.latitude, position.coords.longitude);
});

清除监听

navigator.geolocation.clearWatch(watchID);

  

  

内容原创,转载请注明出处:

作者:Jess_喵

来源:http://www.cnblogs.com/zhangwenjiajessy/p/6246021.html

 

几个有趣的WEB设备API(二)的更多相关文章

  1. 几个有趣的WEB设备API 前端提高B格必备(一)——电池状态&震动api

    受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分. 1.电池状态API navigator.getBattery():这个api返回的是一个pr ...

  2. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  3. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  4. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  5. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  6. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  7. web 基础(二) HTML5

    web 基础(二) HTML5 一.HTML5 HTML5 是最新的 HTML 标准.是专门为承载丰富的 web 内容而设计的,并且无需额外插件.它拥有新的语义.图形以及多媒体元素.并提供的新元素和新 ...

  8. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  9. H5的Web Audio Api

    概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...

随机推荐

  1. SQLSERVER走起微信公众帐号已经开通搜狗微信搜索

    SQLSERVER走起微信公众帐号已经开通搜狗微信搜索 请打开下面链接 http://weixin.sogou.com/gzh?openid=oIWsFt-hiIb_oYqQHaBMoNwRB2wM ...

  2. myeclipse学习总结一(在MyEclipse中设置生成jsp页面时默认编码为utf-8编码)

    1.每次我们在MyEclispe中创建Jsp页面,生成的Jsp页面的默认编码是"ISO-8859-1".在这种情况下,当我们在页面中编写的内容存在中文的时候,就无法进行保存.如下图 ...

  3. 猖獗的假新闻:2017年1月1日起iOS的APP必须使用HTTPS

    一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...

  4. UWP开发必备以及常用知识点总结

    一直在学UWP,一直在写Code,自己到达了什么水平?还有多少东西需要学习才能独挡一面?我想对刚接触UWP的开发者都有这种困惑,偶尔停下来总结分析一下还是很有收获的! 以下内容是自己开发中经常遇到的一 ...

  5. CSS知识总结(七)

    CSS常用样式 5.背景样式 1)背景颜色 background-color : transparent | color 常用值:①英文单词,②十六进制,③RGB或RGBA 另外,还有一种是 渐变色彩 ...

  6. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  7. LINQ to SQL Select查询

    1. 查询所有字段 using (NorthwindEntities context = new NorthwindEntities()) { var order = from n in contex ...

  8. HTML 5 应用程序缓存manifest

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  9. Android—Service与Activity的交互

    service-Android的四大组件之一.人称"后台服务"指其本身的运行并不依赖于用户可视的UI界面 实际开发中我们经常需要service和activity之间可以相互传递数据 ...

  10. 编译器开发系列--Ocelot语言7.中间代码

    Ocelot的中间代码是仿照国外编译器相关图书Modern Compiler Implementation 中所使用的名为Tree 的中间代码设计的.顾名思义,Tree 是一种树形结构,其特征是简单, ...