我们做出来的H5页面在手机端浏览的时候,用户很有可能会产生更换横竖屏的操作,这时如果我们能够判断出横竖屏,就可以更好的优化我们的网页,进而拥有更好的用户体验度。下面是判断横竖屏的代码:

window.addEventListener('orientationchange', function(event){
    if ( window.orientation == 180 || window.orientation==0 ) {
        alert("竖屏");
    }
    if( window.orientation == 90 || window.orientation == -90 ) {
        alert("横屏");
    }
});

大家可以拿到手机上去试一下

H5网页判断手机横屏或是竖屏的更多相关文章

  1. js判断是横屏还是竖屏

    1通过在html中分别引用横屏和竖屏的样式: <link rel="stylesheet" media="all and (orientation:portrait ...

  2. android 强制设置横屏 判断是横屏还是竖屏

    判断activity 是横屏还是竖屏  方法 1: //根据设备配置信息 Configuration cf= this.getResources().getConfiguration(); //获取设 ...

  3. Android开发11——手机横屏和竖屏与android:configChanges

    目前大多数手机都支持重力感应随之而来的就是屏幕方向改变的问题.对应普通开发者来说屏幕的随意改变也会带来困扰.在Google自带的doc里可以看到,如果设备的配置(Resources.Configura ...

  4. js判断手机浏览器是横屏or竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...

  5. 使用JavaScript判断手机是处于横屏还是竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态.从而根据实际需求而执行相应的程序.通过添加监听事件onorientationch ...

  6. JQuery 判断IPad、IPhone、Android是横屏还是竖屏(Window.Orientation实现)

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法. 代码如下: function ...

  7. 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法 其实主要是通过window.or ...

  8. CSS3判断手机横屏竖屏

    原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...

  9. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

随机推荐

  1. 用.net开发wap

    原文发布时间为:2010-08-19 -- 来源于本人的百度文章 [由搬家工具导入] .NET 模板:http://download.csdn.net/source/2631001 WAP应用程序结构 ...

  2. luogu 2463 [SDOI2008]Sandy的卡片 kmp || 后缀数组 n个串的最长公共子串

    题目链接 Description 给出\(n\)个序列.找出这\(n\)个序列的最长相同子串. 在这里,相同定义为:两个子串长度相同且一个串的全部元素加上一个数就会变成另一个串. 思路 参考:hzwe ...

  3. android基本控件学习-----ToggleButton&Switch

    ToggleButton(开关按钮)和Switch(开关)讲解: 一.核心属性讲解: (1)ToggleButton textOn:按钮被选中的时候文字显示 textOff:按钮没有被选中的时候文字显 ...

  4. AI创投的冰与火之歌:泡沫、跟风、短板和有钱花不出去的沮丧【转】

    转自:http://36kr.com/p/5071386.html 国内的AI行业仍处于野蛮生长阶段.热钱不少,优质项目却不多.创业者拿钱难,投资者有钱却花不出去. 编者按:本文来自微信公众号“刺猬公 ...

  5. 和菜鸟一起学android4.0.3源码之lcd屏幕背光调节

    周六的中午还是依旧来了公司,本来也没有打算来的,既然来了,那就把上次遗留下来的一些问题给解决吧,把android下的pwm调lcd背光给总结下吧.关于android的背光,是用pwm波来控制的,通过占 ...

  6. python 查看帮助和变量的强制转换

    查看帮助 dir() 函数 查看对象都有哪些属性和方法 用法:把要查询的对象写入()括号中即可 print(dir([])) (查看列表的方法) 执行: C:\Python27\python.exe ...

  7. Scrapy笔记:日志的使用

    scrapy的日志记录有两种方式: spider.logger.xx()和python标准库中的logger = logging.get_Logger('log information') 向日志对象 ...

  8. 【转】重装Ubuntu时如何保留/home分区中的数据

    Windows系统可以在重装时只格式化C盘,从而保留其他分区的数据. Ubuntu系统也可以,只要在安装系统时分出一个/home分区.你可以把Ubuntu的“/”分区看为Windows的C盘,重装Ub ...

  9. PHP json_encode 转换成空对象和空数组

    对于以下对象 $foo = array( "bar1" => array(), "bar2" => array() ); 我想转换成 { " ...

  10. autolayout先进的自动布局工具箱

    原文链接:http://www.objc.io/issue-3/advanced-auto-layout-toolbox.html 在我的上一个项目中,因为是面向公司内部使用的客户端,所以我直接抛弃了 ...