<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" />

<meta name="viewport" content="width=device-width" />

<title>手机横、竖屏事件</title>

<script language="javascript" type="text/javascript">

//屏幕方向标识，0横屏，其他值竖屏

var orientation=0;

//转屏事件，内部功能可以自定义

function screenOrientationEvent(){

    if(orientation == 0)document.getElementById("change").value="竖";

    else document.getElementById("change").value="横";

}

var innerWidthTmp = window.innerWidth;

//横竖屏事件监听方法

function screenOrientationListener(){

    try{

        var iw = window.innerWidth;

        //屏幕方向改变处理

        if(iw != innerWidthTmp){

            if(iw>window.innerHeight)orientation = 90;

            else orientation = 0;

            //调用转屏事件

            screenOrientationEvent();

            innerWidthTmp = iw;

        }

    } catch(e){alert(e);};

    //间隔固定事件检查是否转屏，默认500毫秒

    setTimeout("screenOrientationListener()",500);

}

//启动横竖屏事件监听

screenOrientationListener();

</script>

</head>

<body onload="screenOrientationEvent()">

<input id="change" type="text" value=""/>

</body>

</html>

原文地址

http://www.dewen.io/q/8694/js%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E6%A8%AA%E5%B1%8F%E5%92%8C%E7%AB%96%E5%B1%8F%E5%88%87%E6%8D%A2

js如何设置网页横屏和竖屏切换的更多相关文章

  1. 转载-js如何设置网页横屏和竖屏切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题

    答案来至于 Sencha Touch 交流 @周旭 这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案:1.横竖屏转换的时候不要重新跑onCreate方法,这个可以在 ...

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

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

  4. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

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

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

  6. activity的横屏和竖屏设置

    主要在清单文件这样配置: <application android:allowBackup="true" android:icon="@drawable/ic_la ...

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

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

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

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

  9. 查看，设置，设备的 竖屏-横屏模式 screen.orientation

    <body> <div id="doc"></div> <div id="model"></div> ...

随机推荐

  1. 误差逆传播(error BackPropagation, BP)算法推导及向量化表示

    1.前言 看完讲卷积神经网络基础讲得非常好的cs231后总感觉不过瘾,主要原因在于虽然知道了卷积神经网络的计算过程和基本结构,但还是无法透彻理解卷积神经网络的学习过程.于是找来了进阶的教材Notes ...

  2. java 线程​基本概念 可见性 同步

    开发高性能并发应用不是一件容易的事情.这类应用的例子包括高性能Web服务器.游戏服务器和搜索引擎爬虫等.这样的应用可能需要同时处理成千上万个请求.对于这样的应用,一般采用多线程或事件驱动的架构.对于J ...

  3. 谈谈react-router学习

    源网页 http://qiutc.me/post/%E8%B0%88%E8%B0%88-react-router.html React + webpack 爽的飞起,少了点什么. 多页面,每次请求页面 ...

  4. ORACLE WIN7安装过程截图

    尽管 有点不正规,但还可以.

  5. c# 类；一维数组；二维数组

    1. 输入邮箱帐号,判断格式是否正确  (1)有且只有一个@          Contains IndexOf ==LastIndexOf  (2)不能以@开头           StartsWi ...

  6. VBA -excel --遍历行

    Sub filter1()Rem MsgBox ("AAAAA")Rem 1 get selected zoneRem 2 loop rows and check columnRe ...

  7. "Redis客户端连接数一直降不下来"的有关问题解决

    [线上问题] "Redis客户端连接数一直降不下来"的问题解决 前段时间,上线了新的 Redis缓存(Cache)服务,准备替换掉 Memcached. 为什么要将 Memcach ...

  8. Unity 地形

    创建一个地形: GameObject —> Create Other —> Terrain; 地形的属性设置:(部分属性后面有另说,表示其他作者有说明过的内容) Base Terrain( ...

  9. stat~~~访问文件状态的利器

    Name stat, fstat, lstat - get file status Synopsis #include <sys/types.h>#include <sys/stat ...

  10. 数学(GCD,计数原理)HDU 5656 CA Loves GCD

    CA Loves GCD Accepts: 135 Submissions: 586 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 2621 ...