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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js简单抽奖代码
Jan 16 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
快速了解Node中的Stream流是什么
Feb 13 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
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
Javascript实现的分页函数
2007/02/07 Javascript
javascript document.images实例
2008/05/27 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python 复平面绘图实例
2019/11/21 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python字符串判断密码强弱
2020/03/18 Python
pandas DataFrame运算的实现
2020/06/14 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
python复合条件下的字典排序
2020/12/18 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
营销计划书
2015/01/17 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
对讲机的最大通讯距离是多少
2022/02/18 无线电
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android