获取各种高度 等H5页面笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取各种高度 等H5页面笔记相关的知识，希望对你有一定的参考价值。
参考技术A 网页可见区域宽： 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
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap;
-webkit-tap-highlight-color: transparent;
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;
filter: brightness(100); 变白
第二行变第一行不变
body
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有弹性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可
-webkit-overflow-scrolling: touch;
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4. 手指滑动时，三个值都会发生变化
5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3.touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一)
var e=arguments[0]
e.preventDefault()
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
关于获取各种浏览器可见窗口大小的一点点研究
经本地测试和研究再次对 document.documentElement.clientWidth 进行解释：
每一个html文件在浏览器中都会被解析为一个页面，document.documentElement.clientWidth则是获取本页面的宽度。
下面进行举例子说明：
1） 如果在浏览器全屏，并且打开的一个标签页中只包含一个页面，则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度：即window.screen.availWidth;
2）当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面：则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度！=屏幕可用工作区宽度：即window.screen.availWidth;
3）当打开的一个标签页中不只包含一个页面：比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面，如下所示
则iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于ifame的宽度
Javascript（Jquery）获取浏览器（屏幕）各种宽度（高度）
Javascript：
alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body)，包括border、padding 、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body)，包括border、padding 、margin等
alert(document.body.scrollWidth); //网页正文全文宽，包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高，包括有滚动条时的未见区域
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽
Jquery：
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等
以上是关于获取各种高度 等H5页面笔记的主要内容，如果未能解决你的问题，请参考以下文章