js如何设置网页横屏和竖屏切换

<!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 >
<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

时间: 2024-10-11 00:59:37

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

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

http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   作者:Daniel   点击:5571 摘要:  Android 模拟器旋转,横屏.竖屏切换设置,android 横屏布局,android 横屏模式,android 模拟器,android 模拟器横屏,android 模拟...       Android 模拟器旋转,横屏.竖屏切换设置,andr

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

判断activity 是横屏还是竖屏  方法 1: //根据设备配置信息 Configuration cf= this.getResources().getConfiguration(); //获取设置的配置信息 int ori = cf.orientation ; //获取屏幕方向 if(ori == cf.ORIENTATION_LANDSCAPE){   //横屏 }else if(ori == cf.ORIENTATION_PORTRAIT){  //竖屏 }   方法2: 通过设备分辨

Android去掉标题,强制设置横屏或竖屏(转载)

全屏在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏 横屏 按照下面代码示例修改Activity的on

quick-cocos2d-x 3.3rc0 与 2.2.5的区别(三)真机上设置横屏与竖屏

今天把样例编译的真机上,发现是横屏显示,我在模拟器上是竖屏显示的.按照2.2.5版本修改属性后还是没有改变,最后发现3.3rc0有所改动! 2.2.5版本,在真机上显示横屏与竖屏,只需在java层修改android:screenOrientation属性,竖屏:portrait:横屏:landscape: 3.3rc0版本,多了如下代码: 因为这个导致修改android:screenOrientation属性无效了,nativeIsLandScape是个什么东西呢?在java层声明如下: pri

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

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationchange,进行执行就可以了. //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==

(转)Android强制设置横屏或竖屏

全屏 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏 横屏 按照下面代码示例修改Activity的o

android手机横屏和竖屏与android:configChanges

原文地址:http://woshixy.blog.51cto.com/5637578/1081913 目前大多数手机都支持重力感应随之而来的就是屏幕方向改变的问题.对应普通开发者来说屏幕的随意改变也会带来困扰.在Google自带的doc里可以看到,如果设备的配置(Resources.Configuration中进行了定义)发生改变,那么所有用户界面上的东西都需要进行更新以适应新的配置.因为Activity是与用户交互的最主要的机制,它包含了处理配置改变的专门支持.除非你特殊指定,否则当配置发生改

让activity保持横屏或者竖屏

让activity保持横屏或者竖屏有两种方式,一种是在activity的AndroidManifest.xml中设置 <activity android:name=".MainActivity" android:label="@string/app_name" <!--设置横屏 竖屏为portrait--> android:screenOrientation="landscape" > <intent-filter&

前端判断横屏还是竖屏

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢.首先在head中加入如下代码: 1 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明1).content中的width