移动端横屏(beta)

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

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

</body>

</html>

  

时间: 2024-11-06 22:56:19

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

移动端横屏处理

之前我的处理是:(错误) @media screen and (orientation: landscape) { .update-main-content { padding: 2.18rem 0 2.18rem 0; } } 因为这个项目是老项目,px转rem只是简单地在页面初始化的时候根据document.documentElement.clientWidth这个来算,注意当横屏的时候,它的rem还是之前竖屏的. 所以正确的处理应该是先检测现在是横屏还是竖屏,再进行计算rem functi

移动端页面 viewport的设置,横屏字体重置的问题

在最初做的时候因为一直没有在手机上实测页面,导致后来写了好些页面后实测发现页面特别小,几乎都看不见. 原因是每个移动设备都是自己默认的视口宽度. 视口:在移动端浏览器当中有两种视口:可见视口(设备屏幕大小)和浏览器视口(网页宽度). 拿iphone4s来说,它的屏幕是320*480的,但是它却能展示980像素宽度的内容(iphone默认都是980),所以你把网页放到移动端展示就相当于缩小了980/320.手机这样做的目的是可以显示更多的东西,但是结果就是在PC端做好的页面到了移动端就像蚂蚁一样小

待解决需求-移动端打开网页强制横屏

待解决需求-移动端打开网页强制横屏[在手机未开启自动横屏的设置时] 或者说: 比如随时可以查看类似Excel.table样子的报表.手机端打开为了宽度看的内容多点(允许底部出现滚动条),所以做好能够横屏过来,然后内容自适应宽度. 或者说: 手机端强制网页横屏,但是里面的内容不要横屏,宽度能自适应. 网上查了下:有用css的  -webkit-transform: rotate(-90deg); 实现.但是它把整个div横屏后,里面的内容也横屏了. 待解决.....................

移动端页面自适应横屏竖屏解决方法思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的例子还是平时常见的移动端的滑动页面,也就是上下切换页面的"H5". 首先要做的准备: 1.html布局 <div id="wrap"> <div class="pageWrap"> <div class="img11&quo

移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo

移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo 前言 在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了. 因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算html的font-size. 代码 因为项目引入了jquery,因此下面的代码全部是jquery语法. function htmlFon

移动端如何强制页面横屏

背景 最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏. 然而当用户竖屏打开时,而且没开启手机里的横屏模式,还要逼用户去开启.这时候用户早就不耐烦的把你的游戏关掉了. 而且有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式. 解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来:而且如果用户切到横屏时,需要

判断是否是移动端是否横屏的方法

移动端具有window.orientation属性, 它返回视口相对于设备自然方向的角度. 可能的值是-90,0,90,和180,其中正值是顺时针,负值是逆时针的. 监听orientationchange事件监听屏幕变化,如果不支持用resize, function is_mobile_horizontal() { function cb() { if (window.orientation == undefined) { return 'Not mobile'; } if (window.or

移动端手机横屏提示

[项目地址]: http://dwz.cn/RYgq7 [手机二维码]: [效果]: [代码] 为了更好的体验,请使用竖屏浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50% { transform: rotate(0); -webkit-transform: rotate(0) } 60% { tr

移动端 竖屏切换横屏时候字体变大

最近遇到ios设备竖屏切换到横屏时候,字体会发生变化的情况.用以下方法可以解决此类问题 -webkit-text-size-adjust : none ; -moz-text-size-adjust : none ; -ms-text-size-adjust : none ; text-size-adjust : none 这样就能禁止当手机由竖屏转向横屏的时内容中的文字自动调整大小,各浏览器下的私有属性为-webkit-text-size-adjust,-moz-text-size-adjus