昨天听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，实现宽度自适应
等等等等
欢迎和大家一起讨论
标签:
css反射
, orientationchange
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！