我们做出来的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. no update

    cd /home/.gnupg/ mv gpg.conf gpgbake.conf pacman -S archlinux-keyring && pacman -Syu 如果还是不行, ...

  2. LeetCode OJ-- Valid Sudoku

    https://oj.leetcode.com/problems/valid-sudoku/ 给出数独的一部分来,验证给出的这一部分是否为 valid 行上无重复的,且是从 ‘1’ 到‘9’ 列上无重 ...

  3. win10+anaconda3+pytorch安装

    安装条件:win10+anaconda3+tf-gpu+pytorch 安装完tf-gpu后,安装pytorch. pytorch采用conda安装:见 https://ptorch.com/news ...

  4. Android学习--持久化(一) 文件存储

    持久化之   文件存储 这里把Android持久化全都整理一下,这一篇文章先简单的说一下文件的存储,通过下面一个简单的Demo,理解一下这个文件存储,先说说下面Demo的思路: 1.创建EditTex ...

  5. 2016北京集训测试赛(十四)Problem B: 股神小D

    Solution 正解是一个\(\log\)的link-cut tree. 将一条边拆成两个事件, 按照事件排序, link-cut tree维护联通块大小即可. link-cut tree维护子树大 ...

  6. 2016北京集训测试赛(七)Problem A: 自动机

    Solution 注意到这一题并不要求字符串最短或者是字典序最小, 因此直接构造就可以了. 我们对于每个点\(u \ne 0\)找到一个串\(S\), 使得\(T(u, S) = T(0, S)\), ...

  7. 聊聊、Zookeeper 数据结构和操作命令

    Zookeeper 的视图结构跟标准的 Unix 文件系统很像,都有一个根节点 / .在根节点下面就是一个个的子节点,我们称为 ZNode.ZNode 是 Zookeeper 中最小数据单位,在 ZN ...

  8. Copy Records From One Data Block To Another Data Block In Oracle Forms

    In this tutorial you will learn to copy the records from one data block to another data block on sam ...

  9. 80端口被屏蔽解决方法,80端口穿透之NAT端口映射技术

    介绍一种NAT端口映射技术应用,达到80端口穿透目的,解决80端口被屏蔽的问题,也是80端口被屏蔽解决方法中经常用到的. 80端口穿透类似80端口转发,因为80端口被屏蔽,在数据层面来说是不能直接访问 ...

  10. nginx/iptables动态IP黑白名单实现方案

    nginx/iptables动态IP黑白名单实现方案 一.手动封IP步骤 1.Nginx手动封IP 1.获取各个IP访问次数 awk '{print $1}' nginx.access.log |so ...