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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php递归函数怎么用才有效
2018/02/24 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
python3.7.0的安装步骤
2018/08/27 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
PHP笔试题
2012/02/22 面试题
本科毕业生应聘求职信
2014/07/06 职场文书
李白故里导游词
2015/02/12 职场文书
学雷锋感言
2015/08/03 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
详解MindSpore自定义模型损失函数
2021/06/30 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android