原理：

当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过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. NSCalendar NSDateComponents

    // NSCalendar // 获取当前日历 NSCalendar *calendar = [NSCalendar currentCalendar]; // 获取当前时间日期的各个值 NSDate ...

  2. Centos7中源码安装Nodejs

    Step 1.确认服务器有nodejs编译及依赖相关软件,如果没有可通过运行以下命令安装. [root@BobServerStation local]# yum -y install gcc gcc- ...

  3. HAL驱动库学习-SPI

    如何使用SPI库1 声明SPI hanlde, 例如: SPI_HandleTypeDef hspi2 通过实现HAL_SPI_MspInit()函数初始化底层资源 以下两个必须进行初始化 a 使能s ...

  4. LoadRunner脚本设计、场景设计和结果分析

    本次笔记主要记录LoadRunner脚本设计.场景设计和结果分析   1. 脚本设计       录制模式            手工模式:插入步骤.手动编写       1.1  脚本增强:     ...

  5. 嵌入式Linux内核制作【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51291316 1. Linux体系结构 从整体上来分,linux可以分为User ...

  6. static const vs. extern const

    在实现文件(.m文件)中使用static const来定义“只在编译单元内可见的常量”(只在.m文件内可见),由于此类常量不在全局符号表中,所以无须为其名称加类名前缀(一般以k开头). 在头文件中使用 ...

  7. VM arguments

    VM arguments -Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxPermSize=512m

  8. SSH 无密码远程执行脚本

    ssh无密码登录及远程执行脚本要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以CentOS7为例. 测试环境:机器A(10.0.224.80):机器B(192.16 ...

  9. Maven 使用介绍

    1,创建Project 先去官方网站下载一个最新版本http://maven.apache.org/download.cgi. 下载后解压,使用之前最好先将maven的bin目录设置到path环境变量 ...

  10. [充电][库]Zlib文件压缩和解压

    原文链接: http://www.cnblogs.com/fairycao/archive/2009/12/09/1620414.html 开源代码:http://www.zlib.net/zlib使 ...