屏幕旋转时候获得的可用高度值经常不一样 #2
Comments
|
@a2631500 不是旋转引起的吧。 |
|
感谢你的答复！
我的JS代码都放在页面底部了，此时，DOM已经加载完毕，不需要$(function(){ //do something.... })这个了。事实上，这个时候我获得的$(window).innerHeight()的值也是正确的。
我的问题是，当旋转手机屏幕的时候，orientationchange事件已经被捕获到了，而在事件处理函数中获得的$(window).innerHeight()的值经常出问题，无论是否使用原生的orientationchange还是引入了你的fix代码。
所以我现在不得不在300毫秒后再执行事件处理函数从而避免不正确的值的出现，300毫秒以下偶尔都会有问题。
|
|
不好意思，之前在github.com上面粘贴的代码被删减了部分。请看附件index.php
|
|
好吧！其实我不建议你在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/ |
|
我的问题其实和各种工具栏无关，我只希望无论旋转多少次，$(window).innerHeight()在同一浏览器中，横屏的时候是同一个值A，竖屏的时候是同一个值B，不出现第三个值C就可以了。
而引入你的代码和使用原生的orientationchange，结果都有C值出现。
延迟300毫秒执行事件处理代码也是我多次测试的结果，理论上确实是靠不住的。事实上我可以在浏览器resize事件中执行我的业务逻辑，resize事件发生后，是不会出现C值的。
但是，我就想弄个明白：为毛orientationchange后不可以呢？？旋转后为什么还要再等300毫秒左右才能得到正确的值呢？这300毫秒内又是完成了什么事件才让移动设备获得了正确的值呢？
|
|
其实这个问题，我在IOS里碰到过好多次，尤其是在用微信打开某个页面时： 个人在想，是否可以单独针对这种情况，将旋转事件event，切分为eventStart和eventEnd，eventEnd代表横竖比已经切换完毕 |
|
你们旋转屏幕的时候例子没出现死循环递归吗 |
这个问题我也发现了，ios微信客户端读window.innerHeight在第一次横竖屏切换的时候是正确的，然而第二次切换的时候innerHeight要过一定的延时才能正确更新、 |
|
原生resize事件监听的是屏幕尺寸的变化，并不会监听innerHeight值的变化，所以在改变横竖屏的那一刻，值是不对的，几秒之后，值就对了，所以建议在updata里面监听innerHeight值的改变会比使用sesize要好。 |
添加了你的fix代码之后，发现屏幕旋转时候获得的可用高度值经常不一样（多测几次就会发现）。
<title>test</title> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/orientationchange-fix.js"></script> <script> var f=function(){ $("p").html($(window).innerHeight()); } f(); window.addEventListener("orientationchange",f,false); </script> ``<!doctype html>
目前我的解决办法是使用原生的orientationchange事件，然后延迟300毫秒执行事件处理函数。
<title>test</title> <script src="js/jquery-2.1.1.min.js"></script> <script> var f=function(){ setTimeout(function(){ $("p").html($(window).innerHeight()); },300); } f(); window.addEventListener("orientationchange",f,false); </script> ``<!doctype html>
The text was updated successfully, but these errors were encountered: