检测移动设备方向的改变
2016-02-27 10:02
399 查看
换了份工作,终于接触到了移动前端,随着工作内容的变更,学习的一个也是不断在更新。查阅资料时找到的一篇,比较简明易懂,遂翻译。
除非你的设备只允许横向或纵向视图,否则你很有可能需要调整一些东西。即使你已经建立的布局流畅优美又符合潮流,也可能需要以编程的方作出一些更改。这就需要一些策略用以检测页面是否已经改变,让我们来了解一下如何检测移动设备方向的改变吧。
在这个变化中,window.orientation属性的值将会发生变化。0代表垂直视图,-90代表设备向右旋转至横向、90代表设备向左旋转至横向。
不像orientationchange事件那样直接易懂,但很好用。
outerWidth和outerHeight:窗口占据的尺寸
innerWidth和innerHeight:实际视图尺寸
当然,它们并不直接告诉你设备的方向,但是通过一些非常简单的数学计算,很容易就可以知道当前屏幕的尺寸是更高还是更宽。
如果你想耍点小聪明,你可以用JavaScript编写一个周期性的“监视器”来检测一个块级元素的背景颜色并触发你自己的方向变化事件。
这是我的一些意见和想法。如果你使用过其他的使用技巧,欢迎与我交流!
作者:David Walsh
原文:https://davidwalsh.name/orientation-change
除非你的设备只允许横向或纵向视图,否则你很有可能需要调整一些东西。即使你已经建立的布局流畅优美又符合潮流,也可能需要以编程的方作出一些更改。这就需要一些策略用以检测页面是否已经改变,让我们来了解一下如何检测移动设备方向的改变吧。
orientationchange事件
这个来自mobile API的方法正是你所期待的,window对象的一个简单的方向改变事件:// Listen for orientation changes window.addEventListener("orientationchange", function() { // Announce the new orientation number alert(window.orientation); }, false);
在这个变化中,window.orientation属性的值将会发生变化。0代表垂直视图,-90代表设备向右旋转至横向、90代表设备向左旋转至横向。
resize事件
有些设备没有提供对orientationchange事件的支持,但它们支持window对象的resize事件:// Listen for resize changes window.addEventListener("resize", function() { // Get screen size (inner/outerWidth, inner/outerHeight) }, false);
不像orientationchange事件那样直接易懂,但很好用。
屏幕尺寸
你可以从window对象中取出一些属性以得到屏幕尺寸和我认为“实际上”的屏幕尺寸:outerWidth和outerHeight:窗口占据的尺寸
innerWidth和innerHeight:实际视图尺寸
当然,它们并不直接告诉你设备的方向,但是通过一些非常简单的数学计算,很容易就可以知道当前屏幕的尺寸是更高还是更宽。
媒体查询
我们也可以用CSS的媒体查询来识别设备的方向:/* 垂直 */ @media screen and (orientation:portrait) { /* portrait-specific styles */ } /* 水平 */ @media screen and (orientation:landscape) { /* landscape-specific styles */ }
如果你想耍点小聪明,你可以用JavaScript编写一个周期性的“监视器”来检测一个块级元素的背景颜色并触发你自己的方向变化事件。
matchMedia
原生的window.matchMedia方法允许实时进行的媒体查询。我们可以利用上面的媒体查询方法以获知当前设备到底是垂直还是水平方向:// Find matches var mql = window.matchMedia("(orientation: portrait)"); // If there are matches, we're in portrait if(mql.matches) { // Portrait orientation } else { // Landscape orientation } // Add a media query change listener mql.addListener(function(m) { if(m.matches) { // Changed to portrait } else { // Changed to landscape } });
这是我的一些意见和想法。如果你使用过其他的使用技巧,欢迎与我交流!
作者:David Walsh
原文:https://davidwalsh.name/orientation-change
相关文章推荐
- 免费论文查重
- 去除UIDatePicker和UIPickerView中间Row上面的分割线
- JAVA垃圾收集机制剖析
- 快速幂取模 模板
- 读书APP
- [置顶] Unity中基于NGUI插件制作序列帧动画
- 2016.2.27日(开学)学习总结
- Opengl 轻型库和碰撞检测相关
- 人类自由的宝贵在于目的的自由,而非行为方式 ——2015-2016半年总结
- 关于MyBatis简化配置---(转载)
- 如何在App层添加System Service
- 第19篇 2016年计划
- curl Error : maximum redirects followed , 这种问题的一种原因 .
- 微信公众号笔记大全
- 解决sqoop需要输入密码的问题
- 解决sqoop需要输入密码的问题
- Java参数是传值还是传引用
- iOS WebView的用法
- iOS-多线程编程学习之GCD——线程组、延时、计时器等(六)
- linux upstart机制简介及封装应用