原理：

当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过window.orientation来获取当前屏幕的状态：
0 - 竖屏
90 - 逆时针旋转横屏
-90 - 顺时针旋转横屏
180 - 竖屏，上下颠倒

如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。

移动设备上的页面，当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听：

<body onorientationchange="updateOrientation();">

监控窗体变化来实现监控手机屏幕横竖

@media screen and (orientation:portrait) {

css[竖向定义样式]

}

@media screen and (orientation:landscape) {

css[横向定义样式]

}

CSS3判断手机横屏竖屏的更多相关文章

  1. 手机横屏竖屏css

    @media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效. 1.头部声明 复制代码 代码如下: <meta name=" ...

  2. javascript判断手机旋转横屏竖屏

    javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...

  3. HTML5中判断横屏竖屏

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...

  4. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  5. js判断手机 横屏模式

    js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...

  6. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

  7. Android之横屏竖屏显示问题

    1.採用不同的布局文件 在res下创建目录layout-land 在该目录下写入的layout(xml文件)横屏的时候系统自己主动选择显示的layout 同理: 在res下创建目录layout-por ...

  8. Android横屏竖屏切换的问题

    Android横屏竖屏切换的问题 http://blog.sina.com.cn/s/blog_77c632410101790w.html

  9. js 横屏 竖屏 相关代码 与知识点

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

随机推荐

  1. 关于缓存中Cookie，Session，Cache的使用

    文章来源:http://canann.iteye.com/blog/1941173 以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application. 其中C ...

  2. Leetcode: Minimum Genetic Mutation

    A gene string can be represented by an 8-character long string, with choices from "A", &qu ...

  3. 获取手机通讯录－－ios

    - (void)test {     //这个变量用于记录授权是否成功,即用户是否允许我们访问通讯录     int __block tip=0;     //声明一个通讯簿的引用     ABAdd ...

  4. 如何设置一个严格30分钟过期的Session（转载）

    本文地址: http://www.laruence.com/2012/01/10/2469.html 今天在我的微博(Laruence)上发出一个问题: 我在面试的时候, 经常会问一个问题: &quo ...

  5. 【转】PowerShell入门（二）：PowerShell是Cmd命令行的加强版吗？

    转至:http://www.cnblogs.com/ceachy/archive/2013/01/31/PowerShell_vs_Cmd.html PowerShell是命令行的加强版吗?Power ...

  6. 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "SQL_Latin1_General_CP1_CI_AS" 之间的排序规则冲突。

    select * from a, b  where a.Code=b.Code collate Chinese_PRC_CI_AS

  7. 生产者-消费者问题【Java实现】

     生产者-消费者问题是经典的并发问题, 非常适合并发入门的编程练习.  生产者-消费者问题是指, 有若干个生产者和若干个消费者并发地读写一个或多个共享存储空间:生产者创建对象并放入到共享存储空间,消费 ...

  8. Hadoop 2.0命令手册

    1.       FS Shell 1.1     简介 调用文件系统(FS)Shell命令应使用 bin/hadoop fs <args>的形式. 所有的的FS shell命令使用URI ...

  9. [课程设计]Scrum 2.8 多鱼点餐系统开发进度(下单一览页面-菜式一览功能的最终实现)

    Scrum 2.8 多鱼点餐系统开发进度 (下单一览页面-菜式一览功能的最终实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队 ...

  10. “stdafx.h”: No such file or directory

    “stdafx.h”: No such file or directory 一般原因是建工程的时候选择了空工程,然后添加现有源文件(含stdafx.cpp) 或者 修改了已有的stdafx.cpp 或 ...