重力感应装置是硬件接口，除非客户端给你开放了这样的接口，不然你不可能实现的
一、首先从功能与设计目标来看，H5专网页主要有以下4大类型：
1.活动运营型
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUSNX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
二．形式为功能服务
1.简单图文
简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
3.问答/评分/测试
问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
4.游戏
从“围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
三．为设计加分的4个要点
一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
1.细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
2.紧跟热点，利用话题效应
3.讲个好故事，引发情感共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
4.合理运用技术，打造流畅的互动体验
随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
结语
H5是Html5的缩写”，这恐怕是很多人的一个错误认知。事实上，二者并不是一个意思。
H5确实涉及HTML5诸多规范，想做H5页面或多或少都要利用到HTML5很多内容。但二者只是有联系，并非对等。
随着H5的火爆，同时也引起了技术阵营与营销阵营的定义争锋，当时在互联网上两方大打口水之战，对定义展开了一场博弈，结果虽然是技术阵营妥协，但也有利的证明了HTML5和H5根本不是一个层面的东西！
H5到底是什么意思，其实真的很难把它用概念的形式来讲清楚。因为H5更像是国人制造的一个专有名词，就像是我们喜欢把“苹果7”说成是“肾7”一样。但H5就坏在它看上去像是个英文缩写，似乎是某种尖端技术，实际上国外根本没有这个说法，老外都不知道这个HFIVE是什么东西。
如果你对H5感兴趣的话，戳出这里：网页链接，海量H5免费视频教程任你挑！
对于学习前端有任何不懂的可以随时来问我，我给你提供一个非常不错的前端交流学习qun：前面是一一四，中间是一八八，后面是四九三一。有问题就在里面问我，这样你可以少走很多弯路，做起来有效率，记得多跟有经验的人交流，别闭门造车。
不知道呢，听人说可以对HTML5的全景播放器进行代码干预，能让苹果设备上使用重力感应（陀螺仪）控制浏览。
varcon=document.getElementById("con");
(function(){
//监听运动传感事件，查看是否支持硬件运动
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',deviceMotionHandler,false);
}else{
alert("您的设备不支持硬件调用");
}
//变量初始化
varx=0,
y=0,
z=0,
lastX=0,
lastY=0,
lastZ=0,
curTime=0,
lastTime=0,
diffTime=0,
speed=0;
//设置一个阀值
varSHAKE_THRESHOLD=800;//设定摇晃的阈值为600运行相应操作
/*
*功能：测算三个方向重力加速度，达到一定值进行相应操作
*作者：HTML5学堂、刘国利、陈能堡
*
*/
functiondeviceMotionHandler(eventData){
varacceleration=eventData.accelerationIncludingGravity;
curTime=newDate().getTime();
if((curTime-lastTime)100){
diffTime=curTime-lastTime;
lastTime=curTime;
//获取当前三个方向的值
x=acceleration.x;
y=acceleration.y;
z=acceleration.z;
//计算速度，为了防止出现负数，进行绝对值
speed=Math.abs((x+y+z-lastX-lastY-lastZ)/diffTime*8000);
if(speedSHAKE_THRESHOLD){
alert("我实现摇一摇了");
};
//记录上一次三个方向的值
lastX=x;
lastY=y;
lastZ=z;
})();
1、点击屏幕交互
点击是最常用的手势，经常用于页面切换。点击引导可以作为注释，用户可以理解H5内容，使用户能够按照H5的节奏操作。例如，在《带上希望的种子去北京》中，用户可以点击手势“检查”行李箱，详细查看H5设计的内容。
2、连续点击交互
连击交互在游戏类中的应用比较多。在游戏类H5中，通常由连续点击生成的数值关联积分排名，具有竞技性质的H5可以进一步吸引用户参与。例如，《漫威电影十周年》的“揍”灭霸小游戏，用户继续点击屏幕，10秒内的点击次数就会计算出整个网络排名。
3、长按交互
4、滑动交互
拖拽交互必须在长按交互的基础上滑动，从一个点拖动到另一个点可以让用户自行控制速度。适合图片展示类的H5。例如，在《睡姿大比拼》中，用户可以拖动角色肢体来创建各种有趣的睡眠姿势。
5、重力交互
重力交互是一个非常直观的表达形式，用户可以轻松get到H5获得乐趣，这意味着手机硬件能升级给H5设计带来了更多的可能性。利用重力感应、陀螺仪、速度加速器等硬件，对H5的玩法进行创新，提高用户的代入感。例如，安装在《一“陆”狂飙，极速挑战》上的赛车游戏是通过手机重力传感来调整小车的方向。
6、全景交互
以上几种就是现目前比较常见的H5交互元素，如有帮助请采纳~