我们在开发Web App时,通常会遇到一些兼容性问题,orientationchange事件就是其中之一。严格来说,并不是orientationchange有兼容问题,而是触发orientationchange事件回调函数时有兼容问题(很绕口啊)。具体表现在回调函数中获取window.innerWidth与window.innerHeight属性上的差异。
在safari下,对orientationchange支持很好,当orientationchange触发回调时,使用window.innerWidth能或立刻获取到最新的屏幕高宽。
而在Android浏览器下,需要延迟一定的时间,才能获取到正确的屏幕高宽。如果触发回调函数时,立刻使用window.innerWidth,那么,只能取到方向未改变之前的高宽,在Android下使用下面的一个简单试验可以得出结果:
<script type="text/javascript">
alert(window.innerWidth); // 默认竖屏状态,得到屏宽480px;
window.addEventListener('orientationchange', function() {
alert(window.innerWidth); // 触发orientationchange回调时,得到屏宽还是480px;
setTimeout(function() {
alert(window.innerWidth); // 延迟300ms,才能得到正确屏宽960px
}, 300);
}, false);
</script>
对于orientationchange的兼容问题,使用proxy函数是很好的一种方法,下面是我给出的一种解决方案:
<script type="text/javascript">
//我的代码库默认依赖了Zepto框架,所以会有Zepto的接口
function createOrientationChangeProxy(fn, scope) {
return function() {
/*
* 如果是Android浏览器,我们设想一种场景,手机从 竖屏-横屏-竖屏-横屏 时,
* 这个过程经历了四次切换,但实际我们只需要处理最后一次切横屏的结果,
* 那么,延迟300ms执行回调函数,可以在最开始时清除冗余的orientationChangedTimeout。
*/
clearTimeout(scope.orientationChangedTimeout);
var args = Array.prototype.slice.call(arguments, 0);
scope.orientationChangedTimeout = setTimeout($.proxy(function() {
/*
* 再设想一种场景,手机从 竖屏-横屏-竖屏 时,在这个过程,系统并未改变任何东西,
* 将lastOrientation保存下来,能有效的避免垃圾操作产生的回调处理
*/
var ori = window.orientation;
if (ori != scope.lastOrientation) {
fn.apply(scope, args); // 这里才是真正执行回调函数
}
scope.lastOrientation = ori;
}, scope), $.os.android ? 300 : 0);
};
}
window.addEventListener('orientationchange', createOrientationChangeProxy(function() {
alert(window.innerWidth); // 无论是Safari还是Android浏览器都能正确的输出屏宽
}, window), false);
</script>
原创文章,转载请注明出处http://zhangdaiping.iteye.com
分享到:
相关推荐
jquery mobile 针对移动端设备的事件... orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数, 该参数有两种返回值:portrait(纵向)landscar
orientationchange-fix是一个基于CSS3@media特性实现对原生orientationchange修复的实用库,它让orientation detection更加可靠,更加easy。
如果您不想在这种情况下进行任何不必要的计算,则可以使用orientationchange事件。 与这个问题orientationchange但是事件是,在很多情况下(尤其是在Android),它触发的方向已经改变了。 因此,您的函数所依赖的...
当设备的方向改变时, orientationchange事件被触发。 – 这个定义忽略了在window.orientation属性改变之后,但在 UI 中反映方向之前触发事件。 检查元素的尺寸(例如window.innerWidth或window.innerHeight )给...
毫无疑问,需要使用orientationchange来监听横竖屏的变化。 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen....
侦听视口更改的选项-在resize和orientationchange更改事件上绑定函数-例如matchMedia.addListener 编写简单,字符少 局限性: 仅允许像素单位 用法: 只需在代码中包含库[removed][removed] if ( mtchD ( 'min-w
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * ...
实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
触发orientationchange事件后,它会将您向上/向下滚动到该元素的顶部。 它需要 jQuery,并且已经验证至少可以追溯到 1.10.2(wootheme 的画布使用的版本)。 我已经在运行 iOS 7 的 iPod touch 上对其进行了测试。...
(2)orientationchange 是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。 这两个搭配起来使用,很容易就能获得设备的横竖屏状态,代码如下: (function(){ var init = function(){
var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize'; var timeoutId;
本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档 ... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = funct
前言 这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起 微信小程序官方文档 >web app变革之rem >rpx单位官方文档 ... 'orientationchange' : 'resize',
1.rem.js内容 !... o = "orientationchange" in n ? "orientationchange" : "resize", a = function() { var n = t.clientWidth || 320; n > 720 && (n = 720); t.style.f
查了不少资料,最后结论如下: 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break;...
在javascript写下如下几行:... resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth === undefined) return;
//判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(竖屏状态!... orientationchange : resize, hengshuping, false); //移动端的浏览器一般
安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var c
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始font-...
1、使用vue-cli脚手架生成项目骨架,略。 2、相关配置: ... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;