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

获取各种高度 等H5页面笔记,第1张

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;

<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, 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或者安卓端禁止掉,然后在有d性需求的页面添加样式

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还会有一个值,

此值为最后一个离开屏幕的手指的接触点。

3touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数,结果直接使用epreventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数

touchmove:function(e,参数一){

var e=arguments[0]

epreventDefault()

}

webpack-config dev-server 添加 disableHostCheck: true,

html的font-size还没设置的时候展示的样式是错误的

关于获取各种浏览器可见窗口大小的一点点研究

经本地测试和研究再次对 documentdocumentElementclientWidth 进行解释:

每一个html文件在浏览器中都会被解析为一个页面,documentdocumentElementclientWidth则是获取本页面的宽度。

下面进行举例子说明:

1) 如果在浏览器全屏,并且打开的一个标签页中只包含一个页面,则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度:即windowscreenavailWidth;

2)当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面:则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度!=屏幕可用工作区宽度:即windowscreenavailWidth;

3)当打开的一个标签页中不只包含一个页面:比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面,如下所示

则iframe指向页面的documentdocumentElementclientWidth不再等于浏览器宽度,而是等于ifame的宽度

windows微信小程序显示模糊的解决方法如下

设置变量值22css,设置的高,按照原宽高,获取该自制应的宽度应为多少,给变量值赋值33html中,动态设置宽度44定宽,自适应高应获取屏幕宽度,按照定高设置自适应宽,计算该自适应高度。

以上就是关于获取各种高度 等H5页面笔记全部的内容,包括:获取各种高度 等H5页面笔记、windows微信小程序显示模糊、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/9681944.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存