Last active
April 24, 2018 10:03
-
-
Save 337547038/b7b302c07b6f25e7c650db56ba700353 to your computer and use it in GitHub Desktop.
手机页面获取屏幕高度问题
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
在做移动端页面的时候,经常会遇到需要获取屏幕的高度和宽度,进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果, | |
这种就需要页面加载时获取到屏幕的高度。 | |
在pc页面时,当一个页面在最底部时,滚动条的位置=文档的高度-窗口的高度。jquery取这三个属性的高度为: | |
var scrollTop=$(window).scrollTop();//滚动条 | |
var documentHeight=$(document).height();//文档 | |
var windowHeight=$(window).height();//窗口 | |
即 scrollTop=documentHeight-windowHeight;条件为真时表示页面滚动到了底部,scrollTop值从0开始,但不会大于documentHeight-windowHeight | |
但在移动端部分浏览器并非如此,例如安卓UC浏览器(带工具条),滚动条在底部时documentHeight-windowHeight>scrollTop,比滚动条还要大50px左右, | |
也就是相等不会成立,没办法判断是否到了底部。这是因为获取到的高度解析不一样,解决办法为使用window.innerHeight取高度,当到达底部时使得上面等式成立 | |
var windowHeight=window.innerHeight; | |
在安卓UC浏览器测试结果为: | |
alert($(window).height()) //483 | |
alert(document.documentElement.clientHeight)//483 | |
alert(window.innerHeight)//532 | |
同一手机微信测试结果为: | |
alert($(window).height()) //532 | |
alert(document.documentElement.clientHeight)//532 | |
alert(window.innerHeight)//532 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment