<!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. Codeigniter数据库操作

    //查询: $query = $this->db_query("SELECT * FROM table"); ================================ ...

  2. PAT 1016. Phone Bills

    A long-distance telephone company charges its customers by the following rules: Making a long-distan ...

  3. mysql添加用户权限

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

  4. request对象方法详解

    自己整理的 javax.servlet.http.HttpServletrequest 所有方法,欢迎收藏! 方法名 说明 isUserInRole 判断认证后的用户是否属于某一成员组 getAttr ...

  5. MVC-控制器向View传值的三种方法

    1.提供视图模型对象 你能把一个对象作为View方法的参数传递给视图. public ViewResult Index() { DateTime date = DateTime.Now; return ...

  6. Android-Wheel-Menu

    https://github.com/anupcowkur/Android-Wheel-Menu

  7. redis持久化和常见故障

    https://segmentfault.com/a/1190000004135982 redis 主从复制 Redis主从复制的原理 当建立主从关系时,slave配置slaveof <mast ...

  8. iOS CoreData (1)

    下面开始学习一下CoreData. Core Data不是一个关系型数据库,也不是关系型数据库管理系统(RDBMS). Core Data 为数据变更管理.对象存储.对象读取恢复的功能提供了支持. 它 ...

  9. WPF组件开发之组件的基类

    之前在网上看到很多关于组件开发的资料,但真正可以用到框架内的却很少.今天贴出自己做的组件,并适合大部分框架的代码. 组件开发需要先做出组件的基类,然后由其他的各类组件去继承这个基类,下面是组件基类的代 ...

  10. Android开发之使用意图

    意图的用途一般是连接活动,传递数据,从意图返回数据等,下面的例子就是利用意图来交互MainActivity和SecondActivity这两个活动. 效果图如下: 实现代码如下: MainActivi ...