纸头折飞机
欢迎大家加入KitJs官方高级QQ群88093625,讨论前端技术,上海携程招聘H5,iOS,android,产品,设计,交互,测试,有意者发简历到xueduanyang1985@163.com
随笔 - 48,  文章 - 2,  评论 - 593

昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体的注册事件

类似这样的系统兼容问题还有很多,其核心原因在于

1. 渲染未结束,js事件提前出发或者延后触发

2. 无法根本之道何时渲染完毕,只能用setTimeout估摸具体时间

所以这里本质上还是js对于渲染模型的观察者模式public的api不够详细造成,所以我们就想到一个旁敲侧击的方式,

1. 通过media query之类的Observe来做实时观察

2. 再结合reflow/repaint会触发resize事件的特质做到及时响应

 

实现代码如下:

jsfile(testOrientation.js)

require([ 'common' ], function($) {
    $('#J_block').bind('resize', function() {
        alert($(this).css('background-color'))
    })
    window.addEventListener("orientationchange", function() {
        var color = $('#J_block').css('background-color');
        $('<div>' + color + '</div>').appendTo(document.body);
    }, false);
})

 

htmlfile

<!doctype html>
<html>
<head>
 <!--# include virtual="/t/common/index/header.html" -->
<style>
@media screen and (orientation:landscape){
    #J_block{
        background-color:green;
    }
}
@media screen and (orientation:portrait){
    #J_block{
        background-color:red;
    }
}
</style>
</head>
<body>
    <div style="margin-top:10px;text-align:center" id="J_block">kqwjelqjwelkqwjelk</div>
    <script src="<!--# include virtual="/t/common/loadRequireUrl.variable" -->?<!--# include virtual="/t/common/gb_version.variable" -->"></script>
    <script>
        require([ '<!--# include virtual="/t/common/loadConfigUrl.variable" -->?<!--# include virtual="/t/common/gb_version.variable" -->' ], function() {
            require([ 'test/testOrientation' ]);
        });
    </script>
</body>
</html>

 

依照这个思路,还可以举一反三,如

1. 基于Css实现的text-ellipsis属性+resize事件,可以算不同屏幕下是否超过字符上限

2. 基于Css实现dataURI实现base64 HTML code实现JS字符编码转换,见我之前的一篇文章http://www.cnblogs.com/xueduanyang/archive/2013/05/30/3108442.html

3. 基于Css的media query实现各种机型探测

4. 基于Css的rem属性实现放大镜同步

5. 基于Css的webkit-calc,实现宽度自适应

等等等等

 

欢迎和大家一起讨论大笑

posted on 2013-11-25 16:34  薛端阳  阅读(1847)  评论(0编辑  收藏