移动端开发之处理手机设备的横竖屏-js教程-PHP中文网

首页

web前端

js教程

移动端开发之处理手机设备的横竖屏

巴扎黑

Aug 12, 2017 pm 04:24 PM

处理手机设备

这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏，window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下

为了应对移动设备屏幕的碎片化，我们在开发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"> 
  <p> 
   内容 
  </p> 
  <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"> 
  <p> 
   内容 
  </p> 
  <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> 
  <p> 
   内容 
  </p> 
 </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> 
  <p> 
   内容 
  </p> 
 </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> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

以上是移动端开发之处理手机设备的横竖屏的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。