<!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内存区域 - 深入Java虚拟机读后总结

    Java虚拟机在执行Java程序的过程中会把所管理的内存划分为若干个不同的数据区域,这些区域有各自的用途,有各自的创建时间和销毁时间,有的区域随着虚拟机进程的启动而存在,有的区域则是依赖用户线程的启动 ...

  2. Java多线程——Executors和线程池

    线程池的概念与Executors类的应用 1.创建固定大小的线程池 package java_thread; import java.util.concurrent.ExecutorService; ...

  3. 大陆用户如何下载Google Play中的apk文件

    利用一些中转网站完成,具体原理可能是以手机虚拟机形式下载,然后提取app,给出下载链接,不过知不知道原理不重要,反正都是被墙. 这里给出测试可用的网站apkpure(20160714) http:// ...

  4. 推荐一个很好的富文本web编辑器UEditor

    前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改.框架是压缩兼混淆后的代码.查一下,好多年前的框架... 咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEdi ...

  5. android关机充电

    1.关机充电其实是进入adb shell很快的方式! 2.手机关机时候插入USB,手机将进入关机充电模式,那么这个模式究竟是怎么进行的,这里分析如下! (1)uboot:这里代码大概浏览了一下:u-b ...

  6. [Javascript] IIFE

    Javascript modules are a design pattern that allow you to encapsulate your code into smaller self ma ...

  7. soap实例入门（转）

    SOAP的HelloWord实例- - 1.1  前言 2005-3-2公司开会并分给我一个任务:写一个程序从福建移动的BOSS系统取出一些相关数据.我得到的资料仅仅有一个“福建移动BOSS与业务增值 ...

  8. hadoop错误java.io.IOException Failed to replace a bad datanode on the existing pipeline due to no more good datanodes being available to try

    错误: java.io.IOException: Failed to replace a bad datanode on the existing pipeline due to no more go ...

  9. xshell连接本地Linux虚拟机!

    终端输入ifconfig获取本地虚拟机的IP地址; 安装openssh-server sudo apt-get install openssh-server 查看server是否启动: ps -ef ...

  10. Java Post 数据请求和接收

    这两天在做http服务端请求操作,客户端post数据到服务端后,服务端通过request.getParameter()进行请求,无法读取到数据,搜索了一下发现是因为设置为text/plain模式才导致 ...