<!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">

// window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式

// onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

(function(){

var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); //判断浏览器是否支持orientation

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(){ //如果当前浏览器不支持orientation，则使用最简单的方法（判断窗口的高宽）

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>

移动端Web开发如何处理横竖屏

</div>

</body>

</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. JAVA 调用Axis2 code generator 生成的webservice

    以下代码为调用 JAVA 调用Axis2 code generator 生成的webservice的代码. package test; import java.rmi.RemoteException; ...

  2. linux 下信号处理命令trap && linux下各种信号的意义

    1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...

  3. 升级OpenSSH详细步骤

    由于系统扫描到OpenSSH版本太低,所以需要将其升级到高版本.网上搜罗数个文章,都多多少少有点疏漏.加上自己之前没升级过SSH,参考好几个文章查缺补漏才升级成功,着实废了不少劲儿.所以综合一下前辈们 ...

  4. ThreadLocal 和Synchronized

    并发都用到, 两个都是解决了线程并发问题,区别呢? Synchronized  同步机制, 共有变量被多个线程使用,会出现线程不安全,所以,加锁,锁机制很多种,例如Synchronized, lock ...

  5. Ajax 表单验证 实现代码

    兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证 image 环境:ruby 1.8.6 + rails 2.1.0 + windows 核 ...

  6. 【转】android的startActivityForResult学习心得

    http://blog.csdn.net/yanzi1225627/article/details/7800529 从昨晚到现在终于调试通了一个startActivityForResult的例子,网上 ...

  7. SQL Server与Oracle对比学习:权限管理(一)

    http://blog.csdn.net/weiwenhp/article/details/8093661 我们发现我们现在的生活中到处是涉及到密码,你要记各种各样的密码.比如银行卡,邮件,QQ,微博 ...

  8. [Webpack 2] Polyfill Promises for Webpack 2

    If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has suppo ...

  9. hibernate相关知识

    1.为什么要用Hibernate JDBC的优点 直接底层操作,提供了很简单.便捷的访问数据库的方法,跨平台性比较强.灵活性比较强,可以写很复杂的SQL语句. JDBC的缺点 因为JAVA是面向对象的 ...

  10. Chapter 4 - How to Fire some Bullets

    Now, we want to let the hero fire some bullets to kill the enemies, add the codes below to set the l ...