获取各种高度等H5页面笔记

Posted 2023-03-20

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还没设置的时候展示的样式是错误的