检测移动设备方向的改变
来源:互联网 发布:淘宝云客服是什么意思 编辑:程序博客网 时间:2024/05/21 18:32
换了份工作,终于接触到了移动前端,随着工作内容的变更,学习的一个也是不断在更新。查阅资料时找到的一篇,比较简明易懂,遂翻译。
除非你的设备只允许横向或纵向视图,否则你很有可能需要调整一些东西。即使你已经建立的布局流畅优美又符合潮流,也可能需要以编程的方作出一些更改。这就需要一些策略用以检测页面是否已经改变,让我们来了解一下如何检测移动设备方向的改变吧。
orientationchange事件
这个来自mobile API的方法正是你所期待的,window对象的一个简单的方向改变事件:
// Listen for orientation changeswindow.addEventListener("orientationchange", function() { // Announce the new orientation number alert(window.orientation);}, false);
在这个变化中,window.orientation属性的值将会发生变化。0代表垂直视图,-90代表设备向右旋转至横向、90代表设备向左旋转至横向。
resize事件
有些设备没有提供对orientationchange事件的支持,但它们支持window对象的resize事件:
// Listen for resize changeswindow.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 matchesvar mql = window.matchMedia("(orientation: portrait)");// If there are matches, we're in portraitif(mql.matches) { // Portrait orientation} else { // Landscape orientation}// Add a media query change listenermql.addListener(function(m) { if(m.matches) { // Changed to portrait } else { // Changed to landscape }});
这是我的一些意见和想法。如果你使用过其他的使用技巧,欢迎与我交流!
作者:David Walsh
原文:https://davidwalsh.name/orientation-change
- 检测移动设备方向的改变
- js/css 检测移动设备方向的变化 判断横竖屏幕
- javascript移动设备的检测
- 移动设备如何改变我们的生活方式
- Swift - 判断设备方向(或监听设备方向的改变)
- iOS强制改变物理设备方向的进阶方法
- 简单的移动设备检测PHP脚本
- 检测iPhone/iPad设备方向的三种方法
- Unity 移动设备面朝方向
- Unity 移动设备面朝方向
- Unity 移动设备面朝方向
- 使用Phaser和HTML5特性检测移动设备旋转重力方向
- 移动设备上的UI布局新方向(思路)
- 基于设备检测的移动设备网页优化
- 改变splitter1的方向
- 移动设备正在改变我们的购物体验
- BI Intelligence:移动设备如何改变我们的生活方式
- 检测移动设备 OnDeviceChange(ON_WM_DEVICECHANGE)
- Hexo结合Github-Pages搭建静态博客
- IOS Sqlite的使用方法
- 【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
- hdu1158 Employment Planning(普通DP)
- MAC上Nuclide的安装
- 检测移动设备方向的改变
- HTML Meta标签
- 软件开发技术:过度设计
- OC项目中使用Swift
- JQuery中的事件和选择器
- hdoj 2083 简易版之最短距离
- 【Java】----线程同步:生产-消费问题
- iOS-NavigationBar手势返回的时候跟随
- 【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)