JavaScript

function setLandscapeClass(){
if(window.orientation === 90 || window.orientation === -90 ){
var landscapeBox = document.getElementById("landscapeBox")
landscapeBox.className = "landscape"
}
if(window.orientation === 180 || window.orientation === 0){
var landscapeBox = document.getElementById("landscapeBox")
landscapeBox.className = "portrait"
}
} setLandscapeClass() window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", setLandscapeClass, false);

  

CSS

.landscape{
z-index: 1001;
width: 100%;
height: 100%;
top: 0rem;
left: 0rem;
background: url('../images/landscape_tip.gif') no-repeat;
background-size: cover;
position: fixed;
} .portrait{
display: none;
}

HTML

 <div id="landscapeBox"></div>

  

手机倒立过来,没有出现屏幕旋转,所以180度是没有用的。

(1)window.orientation 适用安卓手机和iphone6s,其他苹果手机未测试。

(2)window.screen.orientation

适用windows chrome,安卓手机。

iphone6s不适用,其他苹果手机未测试。

JavaScrpit判断横竖屏的更多相关文章

  1. layoutSubviews中判断横竖屏

    在ContentView中重写layoutSubviews方法,然后根据stausbar的方向判断当前视图的横竖屏.具体代码: -(void)layoutSubviews{ [super layout ...

  2. iOS开发之判断横竖屏切换

    /** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ ...

  3. android 判断横竖屏的方法(转)

    public boolean isScreenChange() { Configuration mConfiguration = this.getResources().getConfiguratio ...

  4. Javascript 判断网页横竖屏

    本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...

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

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

  6. Android 横竖屏+碎片的应用

    最终效果展示: 项目介绍: 通过碎片的方式显示标题列表和内容,其中也牵涉到横竖屏的知识 项目代码下载:http://files.cnblogs.com/files/Laopengblog/%E7%A2 ...

  7. 【转】Android横竖屏切换问题

    Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...

  8. Android横竖屏切换总结

    Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...

  9. (一〇八)iPad开发之横竖屏适配

    在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比 ...

随机推荐

  1. params修饰符

    http://msdn.microsoft.com/zh-cn/library/w5zay9db.aspx params 关键字可以指定采用数目可变的参数的方法参数. 可以发送参数声明中所指定类型的逗 ...

  2. Server 2008 R2远程桌面授权,解决120天过期问题

    平时在使用远程桌面过程,我们经常会遇到这样的两个问题. 问题一.远程桌面的连接数限制 Server 2008 R2默认远程桌面连接数是2个用户,如果多余两个用户进行远程桌面连接时,系统就会提示超过连接 ...

  3. Altera FIFO IP核时序说明

    ALTERA在LPM(library of parameterized mudules)库中提供了参数可配置的单时钟FIFO(SCFIFO)和双时钟FIFO(DCFIFO).FIFO主要应用在需要数据 ...

  4. riot.js教程【五】标签嵌套、命名元素、事件、标签条件

    前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...

  5. JAVA提高十四:HashSet深入分析

    前面我们介绍了HashMap,Hashtable,那么还有一个hash家族,那就是HashSet;在讲解HashSet前,大家先要知道的是HashSet是单值集合的接口,即是Collection下面的 ...

  6. 用JavaScript实现表格编辑器

    实现效果: htm l代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. python数据结构与算法篇:排序

    1.冒泡排序(英语:Bubble Sort) 它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成. ...

  8. Heap Sorting 总结 (C++)

    各位读者,大家好. 因为算法和数据结构相关的知识都是在国外学的,所以有些词汇翻译的可能不准确,然后一些源代码的注释可能是英文的,如有给大家带来什么不方便,请见谅.今天我想写一下Heap相关的知识,从基 ...

  9. 浅谈IM(InstantMessaging) 即时通讯/实时传讯【理论篇】

        一.IM简要概述 IM InstantMessaging(即时通讯,实时传讯)的缩写是IM,互动百科大致解释是一种可以让使用者在网络上建立某种私人聊天(chatroom)的实时通讯服务. 大部 ...

  10. 【转】Nginx反向代理和负载均衡

    原文链接:http://www.cnblogs.com/shuoer/p/7820899.html Nginx反向代理和负载均衡 环境说明 由于我使用的是windows系统,所以我用虚拟机虚拟出来了3 ...