您的位置：首页 > 移动开发 > WebAPP

webapp开发中的屏幕旋转问题

2013-08-14 16:23 393 查看
目的:屏幕旋转时候控制dom对象的高度和宽度实现自适应屏幕

思路:

addEventListener('load', function(){
window.onorientationchange = function(){
　　　　　//$(window).width/height  获取内容宽度和长度
　　　　　//$("#").width/height()  设置dom长度宽度
　　　　}
});


问题:

　　1、android手机调用$(window).width/height获取到的长度宽度为旋转之前的长度和宽度 不能直接使用(测试手机为小米手机 UC浏览器)

　　2、ipad iphone 调用$(window).width/height 获取到的是旋转后的长度宽度 可以直接使用

解决思路:

　　通过useragent判断设备

　　ipad iphone 直接使用获取的数据

　　android

　　

//获取屏幕实际像素
var screenWidth = screen.width;
var screenHeight = screen.height;
//获取旋转前的数据
var windowWidth = $(window).width();
var windowHeight = $(window).height();
//获取实际像素数和显示像素的比值
var dpi =  screenWidth/windowWidth;
//获取浏览器除内容之外占据的高度
var topHeight = screenHeight-windowHeight*dpi;
//计算实际数据
windowWidth = screenHeight/dpi;
windowHeight = (screenWidth-topHeight)/dpi;


手上没有多余的设备用来测试 android平板没有测试

表示当前遇到问题已经解决

欢迎探讨

　_____________________分割线________________________

上述代码还有错误 　 不同android浏览器的屏幕事件处理机制不太一样

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
</head>

<body>
</body>
<script type="text/javascript">
addEventListener('load', function(){
window.onorientationchange = function(){
return setTimeout("orientationchange()",50);
}
});
function orientationchange(){
alert(screen.width+"---"+screen.height);
}
</script>
</html>


上边的代码在不同的android手机浏览器中返回的效果竟然不一样

小米自带浏览器 百度浏览器 结果一样 为旋转后屏幕尺寸 UC浏览器为旋转前尺寸

将50延迟调成2000后 测试的浏览器给出的结果相同(小米自带浏览器 百度浏览器 UC浏览器)

怀疑UC把屏幕旋转事件做了修改 (求验证)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航