JavaScrpit判断横竖屏
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判断横竖屏的更多相关文章
- layoutSubviews中判断横竖屏
在ContentView中重写layoutSubviews方法,然后根据stausbar的方向判断当前视图的横竖屏.具体代码: -(void)layoutSubviews{ [super layout ...
- iOS开发之判断横竖屏切换
/** * 当屏幕即将旋转的时候调用 * * @param toInterfaceOrientation 旋转完毕后的最终方向 * @param duration 旋转动画所花费的时间 */ ...
- android 判断横竖屏的方法(转)
public boolean isScreenChange() { Configuration mConfiguration = this.getResources().getConfiguratio ...
- Javascript 判断网页横竖屏
本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- Android 横竖屏+碎片的应用
最终效果展示: 项目介绍: 通过碎片的方式显示标题列表和内容,其中也牵涉到横竖屏的知识 项目代码下载:http://files.cnblogs.com/files/Laopengblog/%E7%A2 ...
- 【转】Android横竖屏切换问题
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...
- Android横竖屏切换总结
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...
- (一〇八)iPad开发之横竖屏适配
在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比 ...
随机推荐
- params修饰符
http://msdn.microsoft.com/zh-cn/library/w5zay9db.aspx params 关键字可以指定采用数目可变的参数的方法参数. 可以发送参数声明中所指定类型的逗 ...
- Server 2008 R2远程桌面授权,解决120天过期问题
平时在使用远程桌面过程,我们经常会遇到这样的两个问题. 问题一.远程桌面的连接数限制 Server 2008 R2默认远程桌面连接数是2个用户,如果多余两个用户进行远程桌面连接时,系统就会提示超过连接 ...
- Altera FIFO IP核时序说明
ALTERA在LPM(library of parameterized mudules)库中提供了参数可配置的单时钟FIFO(SCFIFO)和双时钟FIFO(DCFIFO).FIFO主要应用在需要数据 ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- JAVA提高十四:HashSet深入分析
前面我们介绍了HashMap,Hashtable,那么还有一个hash家族,那就是HashSet;在讲解HashSet前,大家先要知道的是HashSet是单值集合的接口,即是Collection下面的 ...
- 用JavaScript实现表格编辑器
实现效果: htm l代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- python数据结构与算法篇:排序
1.冒泡排序(英语:Bubble Sort) 它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成. ...
- Heap Sorting 总结 (C++)
各位读者,大家好. 因为算法和数据结构相关的知识都是在国外学的,所以有些词汇翻译的可能不准确,然后一些源代码的注释可能是英文的,如有给大家带来什么不方便,请见谅.今天我想写一下Heap相关的知识,从基 ...
- 浅谈IM(InstantMessaging) 即时通讯/实时传讯【理论篇】
一.IM简要概述 IM InstantMessaging(即时通讯,实时传讯)的缩写是IM,互动百科大致解释是一种可以让使用者在网络上建立某种私人聊天(chatroom)的实时通讯服务. 大部 ...
- 【转】Nginx反向代理和负载均衡
原文链接:http://www.cnblogs.com/shuoer/p/7820899.html Nginx反向代理和负载均衡 环境说明 由于我使用的是windows系统,所以我用虚拟机虚拟出来了3 ...