首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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开发基础之四--处理手机设备的横竖屏问题，希望对大家有所帮助！

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

- Author -

blessdyb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
js常用排序实现代码
Dec 28 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue通过数据过滤实现表格合并
Nov 30 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
Hadoop(1) 字段分割(1) REGEXP(1) group by(1) Simhash(1) 控制流(1) 查询效率(1) 表结构(1) Express(1) delete in(1)
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP 基本语法格式
2009/12/15 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
React Native第三方平台分享的实例（Android，IOS双平台）
2017/08/04 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python使用xpath中遇到：到底是什么？
2018/01/04 Python
python对html过滤处理的方法
2018/10/21 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
静态变量和实例变量的区别
2015/07/07 面试题
小学趣味运动会加油稿
2014/09/25 职场文书
写给老婆的保证书
2015/02/27 职场文书