昨天听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，实现宽度自适应
等等等等
欢迎和大家一起讨论
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。