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

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. ABP文档 - Mvc 视图

    文档目录 本节内容: 简介 AbpWebViewPage 基类 简介 ABP通过nuget包Abp.Web.Mvc集成到Mvc视图里,你可以像往常那样创建常规的视图. AbpWebViewPage 基 ...

  2. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  3. 从零开始编写自己的C#框架(26)——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  4. 游戏AI系列内容 咋样才能做个有意思的AI呢

    游戏AI系列内容 咋样才能做个有意思的AI呢 写在前面的话 怪物AI怎么才能做的比较有意思.其实这个命题有点大,我作为一个仅仅进入游戏行业两年接触怪物AI还不到一年的程序员来说,来谈这个话题,我想我是 ...

  5. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  6. 反应器(Reactor)和主动器(Proactor)

    网络方面用的比较多的库是libevent和boost.asio,两者都是跨平台的.其中libevent是基于Reactor实现的,而boost.asio是基于Proactor实现的.Reactor和P ...

  7. 关键帧动画:@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  8. Cocos2d-x不要随便在onEnter里面addChild

    使用任何版本的Cocos2d-x(1.x,2.x,3.0),在onEnter中调用addChild,都要小心谨慎,因为它有可能导致两种莫名其妙的BUG,莫名其妙的BUG当然难以定位了!更何况这个BUG ...

  9. ZooKeeper简介

    本文中,我们将对ZooKeeper进行介绍.简单地说,ZooKeeper是一个用来在构成应用的各个子服务之间进行协调的一个服务. 由于其本身并没有特别复杂的机制,因此我们将会把更多的笔墨集中在如何对Z ...

  10. 2000条你应知的WPF小姿势 基础篇<63-68 Triggers和WPF类逻辑结构>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...