原理：

当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过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. eclipse +VISUALSVN SERVER 创建版本控制器，防止误操作（可视化操作，简单方便，不需要修改配置文件）

    第一步:为eclipse安装Subclipse插件 打开eclipse,点击help-->Install New Software...弹出对话框,点击Add..(新增),以http://sub ...

  2. HTML 5 Canvas 参考手册

    HTML 5 Canvas 参考手册 HTML 视频/音频 HTML 文档类型 描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,&l ...

  3. ajax异步处理时，如何在JS中获取从Servlet或者Action中session，request

    ssh项目中,我需要登陆某个页面(如a.jsp),通过onblur()鼠标失去焦点后来触发js函数(函数是ajax请求)请求到相应的action,处理完成后将数据存放到session对象里面,然后在a ...

  4. APP-SQLAP-10771:Could not reserve record (匹配PO时候)

    ,) SID, substr(C.SERIAL#,,) SERIAL#, substr(B.,) OBJ_NAME, C.STATUS, C.USERNAME, c.action, C.USER#, ...

  5. 弹性伸缩布局flex

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + posi ...

  6. AppleWatch___学习笔记（三）iPhone和Apple Watch上的数据同步

    WatchKit App类似于之前iOS 8上新推出的App Extension(应用扩展),比如Today Extension(今天扩展)和Share Extension(分享扩展).只要你对iOS ...

  7. iOS界面开发

    [转载] iOS界面开发 发布于:2014-07-29 11:49阅读数:13399 iOS 8 和 OS X 10.10 中一个被强调了多次的主题就是大一统,Apple 希望通过 Hand-off ...

  8. [转]网络诊断工具：MTR

    MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用.能按要求对路由中所有节点进行批量测试 第一列(Host):I ...

  9. UBI系统原理分析【转】

    转自:http://blog.chinaunix.net/uid-28236237-id-4164656.html 综述 UBI全称Unsorted Block Images,是一种原始flash设备 ...

  10. MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用

    摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. 第二阶段11-20篇将会侧重于专题的讲解,一篇文章解决一个实际问题. 根据园友的反馈, 本篇文章将会先对呼声最高的仓储模式进行讲解. 文 ...