<!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. iscc2016-好长的字符串

    Vm0wd2QyVkhVWGhVYmxKV1YwZDRXRmxVUm5kVlJscHpXa2M1VjFKdGVGWlZNbmhQWVd4YWMxZHViRmROYWxaeVdWZDRZV014WkhG ...

  2. Strange Way to Express Integers （一般模线性方程组）

    Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 8476   Accepted: 2554 Description Elin ...

  3. 图论（KM算法，脑洞题）：HNOI 2014 画框(frame)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABPoAAANFCAIAAABtIwXVAAAgAElEQVR4nOydeVxTV/r/n9ertaJEC4

  4. 网络流(最小费用最大流)：POJ 2135 Farm Tour

    Farm Tour Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: ...

  5. 新的一年新的气象 云计算与SOA

    ［David S.Linthicum］著 云计算和SOA是不同的概念,但是它们却相互联系.SOA是架构模式,而云计算是架构的实例,或者说是架构的一种选择,SOA更具整体性和战略性,它解决的是包括业务驱 ...

  6. 类似与fiddler的抓包工具 burp suite free edition

    burp suite free edition

  7. 关于Linux

    这是一个2B让我写的关于Linux的一点东西. 其实我对Linux一直都是持有一种很尊敬的态度,作为一个非商业性的操作系统,能够成长成这样简直是不可思议,有一种Dota在游戏界的感觉,很让人佩服.但是 ...

  8. RAM——[HAOI2007]理想的正方形

    题目:[HAOI2007]理想的正方形 描述: [问题描述] 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. [输入]: 第一行为3个 ...

  9. (转)【C++ STL】细数C++ STL 的那些事 -- priority_queue(优先队列)

    装载自http://blog.csdn.net/tianshuai1111/article/details/7652553 一,概述 priority_queue是拥有权值观念的queue,它允许加入 ...

  10. 【最短路】血色先锋军(scarlet) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭 ...