我们在开发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
分享到:
相关推荐
orientationchange-fix是一个基于CSS3@media特性实现对原生orientationchange修复的实用库,它让orientation detection更加可靠,更加easy。
通常,我们使用`addEventListener`方法添加事件监听器,传入三个参数:事件类型、回调函数和是否在捕获阶段触发。然而,iScroll采取了一种非典型的方式,将事件处理器设置为一个对象,而不是直接使用函数。例如,当...
当用户调整浏览器窗口时,这个函数会被调用,我们可以在这个回调函数中重新计算布局,或者更新元素的CSS属性以适应新的窗口尺寸。 此外,JS还可以用于检测设备方向变化,这对于移动设备尤其有用。通过监听`...
事件监听器通过`addEventListener`方法添加,可以对页面元素或整个文档绑定事件处理函数。事件冒泡是指事件从最具体的节点(最内层的节点)开始,逐级向上层节点传播;事件捕获则相反,从最不具体的节点(最外层的...
创建一个Intersection Observer实例,设置观察目标和回调函数,当观察目标与视口发生交集时,回调函数会被触发。这是实现图片延迟加载的关键。 ```javascript const observer = new IntersectionObserver((entries)...
由于不是所有浏览器都支持 `orientationchange` 事件,因此需要先检查浏览器是否支持该事件,若不支持则退而求其次使用 `resize` 事件。 #### 三、实现代码详解 ```javascript // 检测设备是否支持 ...
如果您不想在这种情况下进行任何不必要的计算,则可以使用orientationchange事件。 与这个问题orientationchange但是事件是,在很多情况下(尤其是在Android),它触发的方向已经改变了。 因此,您的函数所依赖的...
在JavaScript中,可以利用window对象的orientation属性以及orientationchange事件来实现对设备横竖屏状态的监听。window.orientation属性返回设备当前的旋转角度值,它可以是以下三种情况之一:0度表示竖屏,90度...
当设备的方向改变时, orientationchange事件被触发。 – 这个定义忽略了在window.orientation属性改变之后,但在 UI 中反映方向之前触发事件。 检查元素的尺寸(例如window.innerWidth或window.innerHeight )给...
// 方案一,使用orientationchange事件 window.addEventListener("orientationchange", function(event) { if (event.orientation === 0 || event.orientation === 180) { console.log('竖屏'); } else if (event...
通过结合使用 `window.orientation`、`orientationchange` 事件以及基于屏幕尺寸的检测方法,我们可以创建一个既高效又兼容多种设备的解决方案。此外,利用 CSS 媒体查询可以更优雅地处理样式更改,从而提高用户体验...
事件监听器`addEventListener`被用来注册`resize`或`orientationchange`事件的处理器,以及在文档内容完全加载完毕后立即执行一次`recalc`函数。这样做的目的是,在页面加载时立即调整页面布局和样式,并在窗口大小...
通过监听设备的orientationchange事件,我们可以判断设备当前是横屏还是竖屏,并相应地改变input元素的样式,例如旋转它的角度。 2. **屏幕旋转适应**: 当应用或网页需要在不同设备方向下工作时,需要考虑到屏幕...
- orientationchange事件:当设备的横竖屏状态发生变化时触发。 4. 页面事件:和页面生命周期相关的一系列事件。 - pageinit:当页面已经初始化,并且在jQuery Mobile完成页面增强之后触发。 - pagecreate:当...
- **事件监听**:监听orientationchange事件,当设备方向改变时触发相应处理函数,如更新页面布局或控制视频播放。 - **微信环境适配**:如果`video.js`针对微信环境进行了优化,那么可能涉及到微信JS-SDK的使用,以...
当用户旋转设备时,如果方向发生变化,将会触发orientationchange事件,并执行回调函数内的代码,根据不同的window.orientation值弹出相应的提示。 值得注意的是,现代浏览器中可能更推荐使用screen.orientation....
- **orientationchange 事件**: 当设备的方向改变时触发此事件,可以通过事件的回调函数中的第二个参数来识别当前设备的方向是纵向(portrait)还是横向(landscape)。 - **触摸事件**: 包括 tap、taphold、swipe、...
这种方法通过JavaScript监听窗口的`resize`事件或`orientationchange`事件,根据窗口的宽度动态调整页面的字体大小。在给定的例子中,`docEl.style.fontSize`被设置为页面宽度除以750的百分比乘以100,以像素为单位...
在Vue项目中实现这种功能,通常会监听window对象的orientationchange事件,然后根据设备的方向状态显示相应的提示信息。此外,也可以利用CSS媒体查询或者一些第三方库来辅助实现横屏提示效果。 项目中的"cc-tools-...