码迷,mamicode.com
首页 > 其他好文 > 详细

一次性解决所有关于各种高度的问题

时间:2019-11-10 11:58:20      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:单位   wrapper   拖拽   状态栏   font   tle   web   点击   手机屏幕   

不管是在写pc端还是移动端,我们总会遇到关于高度的问题。div元素高度,父级元素的高度,屏幕的高度,窗口的高度,可视范围的高度等等,每次都弄的晕头转向,然后接下来就是面向百度了,所以自己整理了一下,好好理解。

  1. 网页可见区域宽: document.body.clientWidth  
  2. 网页可见区域高: document.body.clientHeight  
  3. 网页可见区域宽: document.body.offsetWidth (包括边线的宽)  
  4. 网页可见区域高: document.body.offsetHeight (包括边线的高)  
  5. 网页正文全文宽: document.body.scrollWidth  
  6. 网页正文全文高: document.body.scrollHeight  
  7. 网页被卷去的高: document.body.scrollTop  
  8. 网页被卷去的左: document.body.scrollLeft  
  9. 网页正文部分上: window.screenTop  
  10. 网页正文部分左: window.screenLeft  
  11. 屏幕分辨率的高: window.screen.height  
  12. 屏幕分辨率的宽: window.screen.width  
  13. 屏幕可用工作区高度: window.screen.availHeight  
  14. 屏幕可用工作区宽度: window.screen.availWidth  

常用的为  document.body.offsetHeight和document.body.clientHeight  ,两者的区别为一个包含边框的宽高,一个不包含,这是比较简单的,多看几遍,实操一下就能记住。

可以上都是在浏览器网页中用的,在移动端该如何去计算这些高度呢?

1、获取手机屏幕高度


获取屏幕的高度很简单,HTML自带了screen.height,直接就可以得到屏幕的整体高度,单位是px,物理分辨率值(不是HTML的逻辑分辨率)。  
HTML5Plus里提供了plus.screen.resolutionHeight方法,也是屏幕高度,但这个值是逻辑分辨率的高度。
参考http://html5plus.org/doc/zh_cn/device.html#plus.screen
技术图片

2、获取手机状态栏的高度


顶部状态栏比较复杂,如果webview设了全屏,那么状态栏高度就为0。  
如果设置了沉浸式状态栏,状态栏透明了,虽然状态栏存在理论高度,但webview高度是全屏的。  
plus.navigator.getStatusbarHeight();这个H5+api专门获取状态栏高度。
技术图片

3、获取输入法的高度

在弹出输入法的时候,webview的高度会自动减少,留出来给软键盘,
所以输入法的高度 = 屏幕高度 - webview的高度 - 状态栏的高度
一般手机自带的输入法的高度厂商是默认的
技术图片

4、获取webview的高度

虽然webview的getStyle可以得到webview的高度,但开发者如果不手动设置的话,默认值是100%,这个值对本文探讨的问题没有意义。我们需要px的物理高度。  
在Android里通过如下js代码可以得到webview的高度:plus.android.invoke(plus.android.currentWebview(),"getHeight")   
这是一段Native.js代码,由于Android的webview原生对象就有getHeight()方法,所以就可以直接这样调用。  
当然webview原生对象还有很多方法属性都可以调,具体参阅[Native.js入门](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88)  

这属于归纳总结,我们并不需要把所有的东西全部存储在脑海里,只需要记到有此属性,会用即可!
技术图片

一次性解决所有关于各种高度的问题

标签:单位   wrapper   拖拽   状态栏   font   tle   web   点击   手机屏幕   

原文地址:https://www.cnblogs.com/xiaoyeya/p/11829171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!