<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

var orientation=0;

function screenOrientationEvent(){

if(orientation == 0)

{

document.getElementById("change").value="竖";

$("body").css({

'transform':'rotate(90deg)',

'-webkit-transform':'rotate(90deg)',

'-moz-transform':'rotate(90deg)'

});

}

else

{

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

$("body").css({

'transform':'rotate(0deg)',

'-webkit-transform':'rotate(0deg)',

'-moz-transform':'rotate(0deg)'

});

}

}

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>

<body onload="screenOrientationEvent()">

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

</body>

</html>

　　

移动端横屏(beta)的更多相关文章

  1. (原)前端知识杂烩（css系列）

    更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+ ...

  2. createjs小游戏开发总结

    createjs缩放,html组件input的缩放,transform位置,缩放,字体的大小. 移动端横屏和竖屏幕旋转屏幕自适应,input弹出软键盘的原理和位置偏移,focus,blur弹出软键盘. ...

  3. js-判断移动端用户是横屏放的还是竖屏放的

    在一些移动端页面中,页面的样式我们就支持竖屏播放,这时我们就需要判断是横屏还是竖屏了,不同的方向显示冉的样式. //判断手机横屏竖屏 var html = ""; window.a ...

  4. 用css3解决移动端页面自适应横屏竖屏的思考

    之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...

  5. 【Beta】“北航社团帮”测试报告——小程序v2.0与网页端v1.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v2.0 授权登录与权限检查 新功能的测试 兼容性测试 性能测试 前端测试-- ...

  6. 【Beta】“北航社团帮”发布声明——小程序v2.0与网页端v1.0

    目录 Beta版本新功能 小程序v2.0新功能 新功能列表 功能详情图 新功能动图展示 网页端v1.0功能 登录方式 社团信息的修改 新闻的录入和修改 活动的录入和修改 这一版修复的缺陷 Beta版本 ...

  7. css3 移动端页面全屏旋转，横屏显示。

    css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...

  8. 移动端web如何让页面强制横屏

    前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...

  9. h5移动端页面强制横屏

    说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405  ,我做点点补充  ,谢谢原链接的小姐姐 最近公司是要我做一个h5的小视频,因为是视频接视频,并且 ...

随机推荐

  1. linux之svn

    sudo apt-get install subversion 实践出真理

  2. poj 1390 Blocks

    poj 1390 Blocks 题意 一排带有颜色的砖块,每一个可以消除相同颜色的砖块,,每一次可以到块数k的平方分数.问怎么消能使分数最大.. 题解 此题在徐源盛<对一类动态规划问题的研究&g ...

  3. css设置img成圆形

    效果图: <img src="test.jpg" /> css代码:img{ width:30px;  height:30px;  border-radius:50px ...

  4. 树莓派系统介绍：DIetPi

    项目主页:http://fuzon.co.uk/phpbb/viewtopic.php?f=8&t=6 当前版本:V34(15年4月16日发布) DietPi是国外一个基于Raspbian的精 ...

  5. <td valign="center" align="left">

    单元格对齐方式:垂直居中,水平居左.

  6. 子类可以有跟父类中同名的方法，但是会重写父类中的方法，甚至是root class中的方法

    /* 子类可以重写父类中的方法,甚至是root class中的方法,比如NSObeject 的new方法,但是后提示警告如下 Method is expected to return an insta ...

  7. 我爱模仿app之格瓦拉客户端

    最近有很多人问我,这个效果该怎么实现,那个功能该怎么实现.所以我准备开个专题,找一些app模仿,写一些示例代码,以供大家参考. 第一个下手的就是格瓦拉,没用过的可以下载看看,效果做的还是可以的,专场, ...

  8. mongDB-- 3. 查询操作

    1. 准备工作 (1)启动mongo 进入mongo安装目录的bin/ 目录 , ./mongod (2)启动mongo客户端 ./mongo (3) 查看所有库 show dbs; (4) 切换到l ...

  9. 帝国CMS视频

    http://list.youku.com/albumlist/show?id=17602333&ascending=1.html

  10. Nubia Z9 mini使用体验

    前续用的手机:荣耀6 想换的理由: 1, 充电不方便,除了原装的充电器和小米移动电源,其他的充电器和移动电源约有一半都只能以USB方式慢充,即使是2.0A以上输出电流的: 2, 拍照太渣. Z9 mi ...