Mobile Web开发基础之四--处理手机设备的横竖屏问题


Posted in Javascript onAugust 11, 2017

为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要。

  • window.orientation属性与onorientationchange事件

window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似 

1:使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:

<!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"> 
  body[orient=landscape]{ 
  background-color: #ff0000; 
  } 
 
  body[orient=portrait]{ 
  background-color: #00ffff; 
  } 
 </style> 
 </head> 
 <body orient="landspace"> 
 <div> 
  内容 
 </div> 
 <script type="text/javascript"> 
  (function(){ 
  if(window.orient==0){ 
   document.body.setAttribute("orient","portrait"); 
  }else{ 
   document.body.setAttribute("orient","landscape"); 
  } 
  })(); 
  window.onorientationchange=function(){ 
  var body=document.body; 
  var viewport=document.getElementById("viewport"); 
  if(body.getAttribute("orient")=="landscape"){ 
   body.setAttribute("orient","portrait"); 
  }else{ 
   body.setAttribute("orient","landscape"); 
  } 
  }; 
 </script> 
 </body> 
</html>

 2: 类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:

<!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> 
 </head> 
 <body orient="landspace"> 
 <div> 
  内容 
 </div> 
 <script type="text/javascript"> 
  (function(){ 
  var init=function(){ 
   var updateOrientation=function(){ 
   var orientation=window.orientation; 
   switch(orientation){ 
    case 90: 
    case -90: 
    orientation="landscape"; 
    break; 
    default: 
    orientation="portrait"; 
    break; 
   } 
   document.body.parentNode.setAttribute("class",orientation); 
   }; 
 
   window.addEventListener("orientationchange",updateOrientation,false); 
   updateOrientation(); 
  }; 
  window.addEventListener("DOMContentLoaded",init,false); 
  })(); 
 </script> 
 </body> 
</html>

 

  • 使用media query方式

    这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:

<!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"> 
  @media all and (orientation : landscape) { 
  body { 
   background-color: #ff0000; 
  } 
  } 
 
  @media all and (orientation : portrait){ 
  body { 
   background-color: #00ff00; 
  } 
  } 
 </style> 
 </head> 
 <body> 
 <div> 
  内容 
 </div> 
 </body> 
</html>
 
  • 低版本浏览器的平稳降级

    如果目标移动浏览器不支持media query,同时window.orientation也不存在,则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比,从而判定当前的横竖屏状态。如下代码所示:

<!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"> 
  (function(){ 
  var updateOrientation=function(){ 
   var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; 
   document.body.parentNode.setAttribute("class",orientation); 
  }; 
 
  var init=function(){ 
   updateOrientation(); 
   window.setInterval(updateOrientation,5000); 
  }; 
  window.addEventListener("DOMContentLoaded",init,false); 
  })(); 
 </script> 
 </head> 
 <body> 
 <div> 
  内容 
 </div> 
 </body> 
</html>
  •  统一解决方案

    将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:

<!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"> 
  (function(){ 
  var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); 
 
  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(){ 
    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> 
  内容 
 </div> 
 </body> 
</html>

原英文网址:http://davidbcalhoun.com/2010/dealing-with-device-orientation

以上所述是小编给大家介绍的Mobile Web开发基础之四--处理手机设备的横竖屏问题,希望对大家有所帮助!

Javascript 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
基于datagrid框架的查询
Apr 08 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 #Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 #Javascript
JS SetInterval 代码实现页面轮询
Aug 11 #Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 #Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 #Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 #Javascript
You might like
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JS中数据结构之栈
2019/01/01 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
暑期培训随笔感言
2014/03/10 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
银行转正自我鉴定
2014/09/29 职场文书
主持稿开场白
2015/06/01 职场文书
公司管理制度范本
2015/08/03 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Golang 切片(Slice)实现增删改查
2022/04/22 Golang