移动端Web开发如何处理横竖屏
2016-07-18 15:53
239 查看
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> .landscape body { background-color: #ff0000; } .portrait body { background-color: #00ffff; } </style> <script type="text/javascript"> // window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式 // onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似 (function(){ var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); //判断浏览器是否支持orientation var updateOrientation=function(){ if(supportOrientation){ updateOrientation=function(){ var orientation=window.orientation; switch(orientation){ case 90: case -90: orientation="landscape"; //横屏 break; default: orientation="portrait"; //竖屏 } document.body.parentNode.setAttribute("class",orientation); }; }else{ updateOrientation=function(){ //如果当前浏览器不支持orientation,则使用最简单的方法(判断窗口的高宽) var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait"; document.body.parentNode.setAttribute("class",orientation); }; } updateOrientation(); }; var init=function(){ updateOrientation(); if(supportOrientation){ window.addEventListener("orientationchange",updateOrientation,false); }else{ window.setInterval(updateOrientation,5000); } }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> 移动端Web开发如何处理横竖屏 </div> </body> </html>
相关文章推荐
- Android轮播图的实现
- android studio 代码快捷键
- 小程序
- Android入门1 ——系统介绍与框架
- 关于手机端CSS Sprite图标定位的一些领悟
- iOS 通知中心传值
- GitHub 优秀的 Android 开源项目
- Android中SearchView的功能和用法
- android的自定义toolbar
- iOS企业版IPA包分发说明
- 移动端1px解决方案
- 学习笔记-斯坦福iOS7-第七课:视图,绘制,手势识别
- xmpp配置服务器
- Android中的多点触摸交互处理,可以达到缩放图片的效果
- android毕业设计-注册界面
- Android手机与vr交互暴风魔镜3D效果显示原理
- Swift中文教程(二十三) 高级运算符
- 知识点总结
- android 毕业设计项目开发 -登录界面
- Swift中文教程(二十二) 泛型