<!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. The server does not support version 3.1 of the JEE Web module specification.

    使用MyEclipse2015打开MyEclipse2014编辑的项目,在服务器Tomcat 7部署时,提示"The server does not support version 3.1 ...

  2. nginx配置文件的说明

    设置连接超时时间 http { ## # Basic Settings ## sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout ...

  3. Java如何等待子线程执行结束

    工作中往往会遇到异步去执行某段逻辑, 然后先处理其他事情, 处理完后再把那段逻辑的处理结果进行汇总的产景, 这时候就需要使用线程了. 一个线程启动之后, 是异步的去执行需要执行的内容的, 不会影响主线 ...

  4. mysql添加用户权限

    MySQL性能调优my.cnf详解 //登录MYSQLmysql -u root -p//创建用户insert into mysql.user(Host,User,Password) values(‘ ...

  5. ABAP(笔记)

    1.excel表格上传 *&---------------------------------------------------------------------* ** 程序名称:ZSD ...

  6. 关于编译Lambda时报告返回的为void的错误

    这个错误的信息是这样的: a lambda that has been specified to have a void return type cannot return a value 报告错误的 ...

  7. MFC程序实现给对话框加入�背景图片

    1.插入一个Bitmap的资源图片,如果资源名称为:IDC_BITMAP1 2.在CXXXDialog::OnPaint()中实现: void CMyDialogDlg::OnPaint() { if ...

  8. java数组的拷贝四种方法:for、clone、System.arraycopy、arrays.copyof

    public class ArrayCopy{ public static void main(String []args){ int []a = {1,3,4,5}; toPrint(a); int ...

  9. android的消息处理机制(图+源码分析)——Looper,Handler,Message

    android源码中包含了大量的设计模式,除此以外,android sdk还精心为我们设计了各种helper类,对于和我一样渴望水平得到进阶的人来说,都太值得一读了.这不,前几天为了了解android ...

  10. python中的lambda表达

    C++中的lambda表达式与C++11增加标准库,是一个简短的匿名的可调用对象,编译器会将其转化为一个匿名类的对象.lambda表达式的最大特点就是简短灵活.调用方便.它不须要处理非常复杂的逻辑.通 ...