原理：

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

    服务端,端口的状态变化 先在本机(IP地址为:192.168.1.10)配置FTP服务,然后在其它计算机(IP地址为:192.168.1.1)访问FTP服务,从TCPView看看端口的状态变化. 下面 ...

  2. 解决MyEclipse报错问题

    转载文章.   做NC的时候从别人那拷了个NC_DEMO结果我这报错他那没报错  import nc.bs.wfengine.engine.ext.TaskTopicResolver;  报错信息:A ...

  3. linux中非root用户使用wireshark进行抓包

    开始的时候我是在终端中使用sudo 命令打开 wireshark 的,因为如果不这样的话 wireshark 就没法抓包啊.偶尔抓一次包就使用这样的方式提权. 今天使用 wireshark 的时候特意 ...

  4. C++中explicit关键字的作用

    转载自:http://www.cnblogs.com/winnersun/archive/2011/07/16/2108440.html explicit用来防止由构造函数定义的隐式转换. 要明白它的 ...

  5. Ajax提交整个表单

    //view页面 <script> $(function () { $("#btnAdd").click(function () { var pars = $(&quo ...

  6. linux Nginx VirtualHost虚拟主机多站点设置

    linux系统CentOS7 Nginx1.9.9 一台nginx服务器同一IP被注册多个不同域名,访问不同域名到该服务器后请求不同项目 本台nginx服务器的IP地址为 192.168.155.12 ...

  7. Java虚拟机学习（1）：体系结构 内存模型

    一:Java技术体系模块图 Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代" ."非堆",  它用于存储虚拟机加载的类信息.常量.静态 ...

  8. Vue-简单购物车

    优点 体积小.接口灵活.侵入性好,可用于页面的一部分,而不是整个页面.扩展性好.源码规范简洁.代码较为活跃,作者是中国人,可在官方论坛中文提问.github9000+.基于组件化的开发. 缺点 社区不 ...

  9. sftp 设置仅能访问自己目录的用户

    1. 创建一个目录,owner为root,权限为750或755,此处为 /home/test01 添加一个用户test01,home目录设置为 /home/test01 再创建一个子目录用于用户上传: ...

  10. selenium操作滚动条方法

    /***  滚动条滚到最下方,和滚到指定位置*/@Test(priority =1 )    public void scrollingToBottomo(){        //使用JavaScri ...