webapp开发中的屏幕旋转问题

目的:屏幕旋转时候控制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把屏幕旋转事件做了修改 (求验证)

posted @ 2013-08-14 16:23  炘恪  阅读(932)  评论(0)  编辑  收藏  举报