1. <!Doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
  6. <title>横竖屏切换检测</title>
  7. <style type="text/css">
  8. .landscape body {
  9. background-color: #ff0000;
  10. }
  11.  
  12. .portrait body {
  13. background-color: #00ffff;
  14. }
  15. </style>
  16. <script type="text/javascript">
  17. // window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
  18. // onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
  19. (function(){
  20. var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); //判断浏览器是否支持orientation
  21.  
  22. var updateOrientation=function(){
  23. if(supportOrientation){
  24. updateOrientation=function(){
  25. var orientation=window.orientation;
  26. switch(orientation){
  27. case 90:
  28. case -90:
  29. orientation="landscape"; //横屏
  30. break;
  31. default:
  32. orientation="portrait"; //竖屏
  33. }
  34. document.body.parentNode.setAttribute("class",orientation);
  35. };
  36. }else{
  37. updateOrientation=function(){ //如果当前浏览器不支持orientation，则使用最简单的方法（判断窗口的高宽）
  38. var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
  39. document.body.parentNode.setAttribute("class",orientation);
  40. };
  41. }
  42. updateOrientation();
  43. };
  44.  
  45. var init=function(){
  46. updateOrientation();
  47. if(supportOrientation){
  48. window.addEventListener("orientationchange",updateOrientation,false);
  49. }else{
  50. window.setInterval(updateOrientation,5000);
  51. }
  52. };
  53. window.addEventListener("DOMContentLoaded",init,false);
  54. })();
  55. </script>
  56. </head>
  57. <body>
  58. <div>
  59. 移动端Web开发如何处理横竖屏
  60. </div>
  61. </body>
  62. </html>

　　

移动端Web开发如何处理横竖屏的更多相关文章

  1. 移动端web开发技巧（转）

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  2. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  3. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  4. 移动端Web开发注意点

    不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...

  5. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...

  6. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  8. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  9. 移动端web开发整理

    /* 移动端定义字体的代码 */body { font-family: "Helvetica Neue", Helvetica; } ios端触摸时,会出现一个半透明灰色遮罩 如果 ...

随机推荐

  1. 字符串hash函数

    本文搜集了一些字符串的常用hash函数. 范例1:判断两个单词是否含有相同的字母,此时我们可以用hash做.例如,“aaabb”与"aabb"含有相同的单词.(参考:http:// ...

  2. office文件在线预览，模仿网易邮箱在线预览的

    最近研究了半天,代码是倾情奉送啊,C#,asp.net的 这个原理是office文件转换为PDF文件,然后再转换成SWF文件,FlexPaper+swfTools. 有个问题,需要在web.confi ...

  3. 用Android++在Visual Studio中用C/C++开发Android应用

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Android++在Visual Studio中用C/C++开发Android应用.

  4. JAVA从零单排之前因

    本人,男,21岁,普通院校本科,计算机专业.大学之前对计算机编程没有一点涉及.大学学计算机专业也是个偶然.因为当初高考的成绩不好,结果都是我父亲帮我报的学校和专业. 上了大学之后,大一都是在新奇中度过 ...

  5. 显示、隐藏 PowerShell

    以下是一个快速实现该需求的 module.只要将以下代码复制粘贴到 Documents\WindowsPowerShell\Packages\PowerShell\PowerShell.psm1 即可 ...

  6. Highcharts可拖动式图表

    Highcharts可拖动式图表 默认情况下,Highcharts依据给定的数据列生成图表. 浏览者是无法改动图表的. 假设浏览者须要手动调整数据节点.就须要借助第三方插件Draggable Poin ...

  7. 关于PreferenceActivity的使用和一些问题的解决(自己定义Title和取值)

    android的Setting往往用PreferenceActivity来写的 我们在建立layout文件: <PreferenceScreen xmlns:android="http ...

  8. Swift 析构器deinit

    析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标识,类似于构造器用init来标识. 原理: Swift会自动释放不再需要的实例以释放资源.Swift通 ...

  9. 如何判断Android系统的版本

    随着Android版本的增多,在不同的版本中使用不同的设计是必须的,根据程序运行的版本来提供不同的功能.这涉及到如何在程序中判断Android系统的版本. 在Android api中的android. ...

  10. 基于heartbeat的单播方式实现tomcat高可用

    1.节点规划 在master.backup节点上添加eth0.eth1两网卡,具体添加过程,参考“基于VMware为CentOS 6.5配置两个网卡” 2.IP规划   master backup e ...