怎样用 JavaScript 准确获取img的高度和宽度手机屏幕的宽度和高度

来源：蜘蛛抓取(WebSpider) 时间：2016-12-27 06:45 标签： js获取屏幕宽度和高度
手机页面获取屏幕高度那些事
&&&&在做移动端页面的时候，经常会遇到需要获取屏幕的高度和宽度，进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果（不出现滚动条），这种就需要页面加载时获取到屏幕的高度，然后才能定义，每一屏的高度。以前做pc页面时，才会说这个高度的获取会有兼容问题，clientHeight、offsetHeight 和scrollHeight的各种讨论和兼容处理已经很多了。但是在移动端，主要还是考虑webkit内核，那应该不存在这种兼容问题的啊！&&&&但事实并非如此，在设备上同样因为有各种浏览器，对上面获取高度的解析不一样，导致获取的高度不一致的问题。&&&&后来我们发现，我们上面三个方法都是基于document下的元素的，比如document.body.clientHeight、document.body.offsetHeight、document.body.scrollHeigh；我们忽略了一个window的方法：innerHeight，所以准确的说我们获取屏幕高度的方法有四个。&&&&我们这里的测试条件是，假如页面没有滚动条，都是一屏内容（因为我们经常是在做那种满屏滚动的专题页面才需要获取屏幕高度），系统是IOS8.1，浏览器包括Safari、chrome、UC、QQ、微信内部。&&&&&&&&可以点击上面的演示页面，扫二维码在手机测试。&&&&这里说一下我的测试结果（iPhone5）&&&&Safarialert(document.body.clientHeight);//460
alert(document.body.offsetHeight);//460
alert(document.body.scrollHeight);//460
alert(window.innerHeight);//460& & chrome(chrome是没有底部工具条的)alert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//504&&&&UCalert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//460&&&&QQalert(document.body.clientHeight);//500
alert(document.body.offsetHeight);//500
alert(document.body.scrollHeight);//500
alert(window.innerHeight);//452&&&&微信内部(也是是没有底部工具条的)alert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//504&&&&通过上面的数据分析，我们发现主要是UC和QQ在用这四种方法去获取高度时，表现的数据是不一致的，所以如果我们使用前面三种（clientHeight、offsetHeight、scrollHeight）得到的高度去定义页面的高度，在UC和QQ下，页面的底部内容被底部的工具条遮挡住了，因为他们的的高度计算是忽略了工具条的存在。&&&&所以这里建议，在手机页面获取屏幕高度时，尽量使用window.innerHeight，以最大的范围兼容各种浏览器。&&&&而对于安卓的机子，因为安卓系统版本比较多，我这里测试了安卓4.1以上的浏览器包括chrome、UC、QQ、微信内部，发现UC和QQ并没有存在IOS上面的问题，四种方法获取到的高度都是一致的！！终于发现安卓也有优胜的地方了~
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
关注w3cmark
微信公众号
w3cmark_comJS,Jquery获取屏幕的宽度和高度，分辨率
Javascript:
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度
包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度
包括border padding margin
转自：/xiaopin/archive//2418152.html
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
阅读(...) 评论()

我要回帖

更多关于 js获取屏幕宽度和高度 的文章

 

随机推荐