屏幕旋转时候获得的可用高度值经常不一样 about orientationchange-fix

[newsekaes]

其实这个问题，我在IOS里碰到过好多次，尤其是在用微信打开某个页面时：
该问题为客户端问题，和JavaScript无关，更和各种轮子无关
350*588的手机屏幕，横屏时，获取高度约为300；然后横屏转竖屏的一瞬间，屏幕转换事件触发了（无论是原生orientationchange事件，还是原生resize事件），但那一瞬间获取的高度仍然是300
在适当的延迟几百毫秒之后，才能正确获得旋转之后的高度（大约500）

个人在想，是否可以单独针对这种情况，将旋转事件event，切分为eventStart和eventEnd，eventEnd代表横竖比已经切换完毕

[zhansingsong]

@a2631500 不是旋转引起的吧。
我不知道你是否了解：浏览器是如何进行渲染页面的。知道为啥你延迟一下就可以了？（其实这里可以不是300，其他值也行），只要DOM tree准备好了就行。你可以将代码放在body的底部或在$(function(){ //do something.... })也行。看描述我想到就这么多了，也不知道能否解决你的疑惑。

[a2631500]

感谢你的答复！ 我的JS代码都放在页面底部了，此时，DOM已经加载完毕，不需要$(function(){ //do something.... })这个了。事实上，这个时候我获得的$(window).innerHeight()的值也是正确的。 我的问题是，当旋转手机屏幕的时候，orientationchange事件已经被捕获到了，而在事件处理函数中获得的$(window).innerHeight()的值经常出问题，无论是否使用原生的orientationchange还是引入了你的fix代码。 所以我现在不得不在300毫秒后再执行事件处理函数从而避免不正确的值的出现，300毫秒以下偶尔都会有问题。

[a2631500]

不好意思，之前在github.com上面粘贴的代码被删减了部分。请看附件index.php

[zhansingsong]

好吧！其实我不建议你在mobile上使用$(window).innerHeight()获取浏览器visual viewport的高度。因为不靠谱的，每个浏览器给出值都不一样，特别是国内，如浏览器UC，搜狗。他们给的值会减掉工具栏（定栏或底栏）的高度。至于你说高度有时不正确，我想到的可能与工具栏有关吧。当然也有一些隐藏工具栏技巧（不过貌似对国内一些浏览器不好使）：

function hideURLbar() {
	if (window.location.hash.indexOf('#') == -1) {
		window.scrollTo(0, 1);
	}
}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
    addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
    }, false);
}

参考文章：http://atlchris.com/1847/quick-tip-hide-mobile-web-browser-address-bar-improved/
之前做横竖屏适应了解一点，希望对你有帮忙。至于其他原因我就不了解了-。-

[a2631500]

我的问题其实和各种工具栏无关，我只希望无论旋转多少次，$(window).innerHeight()在同一浏览器中，横屏的时候是同一个值A，竖屏的时候是同一个值B，不出现第三个值C就可以了。 而引入你的代码和使用原生的orientationchange，结果都有C值出现。 延迟300毫秒执行事件处理代码也是我多次测试的结果，理论上确实是靠不住的。事实上我可以在浏览器resize事件中执行我的业务逻辑，resize事件发生后，是不会出现C值的。 但是，我就想弄个明白：为毛orientationchange后不可以呢？？旋转后为什么还要再等300毫秒左右才能得到正确的值呢？这300毫秒内又是完成了什么事件才让移动设备获得了正确的值呢？

[gongxihai22]

你们旋转屏幕的时候例子没出现死循环递归吗

[dark94da]

其实这个问题，我在IOS里碰到过好多次，尤其是在用微信打开某个页面时：
该问题为客户端问题，和JavaScript无关，更和各种轮子无关
350*588的手机屏幕，横屏时，获取高度约为300；然后横屏转竖屏的一瞬间，屏幕转换事件触发了（无论是原生orientationchange事件，还是原生resize事件），但那一瞬间获取的高度仍然是300
在适当的延迟几百毫秒之后，才能正确获得旋转之后的高度（大约500）

个人在想，是否可以单独针对这种情况，将旋转事件event，切分为eventStart和eventEnd，eventEnd代表横竖比已经切换完毕

这个问题我也发现了，ios微信客户端读window.innerHeight在第一次横竖屏切换的时候是正确的，然而第二次切换的时候innerHeight要过一定的延时才能正确更新、

[SuttonSteele]

原生resize事件监听的是屏幕尺寸的变化，并不会监听innerHeight值的变化，所以在改变横竖屏的那一刻，值是不对的，几秒之后，值就对了，所以建议在updata里面监听innerHeight值的改变会比使用sesize要好。