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

作者: 年轻人多学点 | 来源:发表于2021-02-13 23:19 被阅读0次

网页可见区域宽： 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

image

font-family

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

禁止双击屏幕缩放

IOS蓝湖上的bold就是font-weight 500

禁止复制

Element {

 -webkit-user-select: none;

 -moz-user-select: none;

 -khtml-user-select: none;

  user-select: none;

}

保留文本换行

white-space: pre-wrap;

按住出现黑色背景

-webkit-tap-highlight-color: transparent;

a,input,button{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

*{
webkit-tap-highlight-color:rgba(0,0,0,0);//去掉点击高亮
-webkit-appearance: none;//消除输入框和按钮的原生外观
-webkit-user-select: none; //禁止页面文字选择，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
-webkit-text-size-adjust: none; //禁止文字自动调整大小
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
pointer-events: none;//禁止长按图片
}

p标签内换行

注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;

icon 变色

filter: brightness(100);变白

超出变省略号

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

第二行变第一行不变

overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

webView后退时请求有缓存的问题

//方法1：
//不用window.history.go(-1)或者back()后退，改用跳转
document.location.href = document.referrer
//方法2
//第一个页面
       if (sessionStorage.getItem("editorVisited")) {
         this.nothing = true  //全部不显示
         sessionStorage.removeItem("editorVisited");
         window.location.reload(true); // 这里就是强制刷新页面,解决webwiew返回调接口有缓存的问题
        }else{
          //doSth
        }
//第二个页面
       sessionStorage.setItem("editorVisited", "True");
       // 继续用goback

window.history.pushState(null, '', document.URL) // 编辑时阻止后退
        window.addEventListener('popstate', function(e) {
          // alert("我监听到了浏览器的返回按钮事件啦");
          window.history.pushState(null, '', document.URL) // 编辑时阻止后退
        });

ios移动端页面橡皮筋效果去除 keyword：`overscroll-behavior:none -webkit-overflow-scrolling : touch;`

body{}

小程序上fixed成功过

一般这种都让ios或者安卓端禁止掉，然后在有弹性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可

ios滑动不流畅

-webkit-overflow-scrolling: touch;

 document.body.addEventListener('touchmove', function (e) {
        e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
      }, {passive: false}) // passive 参数不能省略，用来兼容ios和android
    },

判断是否在小程序中

        let isWeChatApplet //判断是否是在微信小程序中
          wx.miniProgram.getEnv((res) => {
            if (res.miniprogram) {//在小程序中
              isWeChatApplet =  true 
              // wx.miniProgram.postMessage({ data: val})
                // wx.miniProgram.redirectTo({url:"/networkPackage/pages/mailList/mailList"})
                wx.miniProgram.navigateTo({
                  url: `/pages/intensive_reading/intensive_reading?id=${bookId}`
                })
              } else {//在微信中
                isWeChatApplet =  false
              }
          })
        }

H5和原生交互

//H5调原生ios
 window.webkit.messageHandlers.done.postMessage(doneList)

  //H5调原生android
  window.AndroidJs.toSaveAddress(JSON.stringify(doneList))
   //window.className.functionName(jsonString)

//原生ios调H5 
  <script>
   function save(){
      return window.list
  }
  </script>

//小程序 h5 交互

      if(!window.UA.isWeixin){ //不在weixin中走app交互
        this.h5tools.jiaohu("1012",{bookID:bookId})
      }else{
        let isWeChatApplet //判断是否是在微信小程序中
          wx.miniProgram.getEnv((res) => {
            if (res.miniprogram) {//在小程序中
              isWeChatApplet =  true 
              // wx.miniProgram.postMessage({ data: val})
                // wx.miniProgram.redirectTo({url:"/networkPackage/pages/mailList/mailList"})
                wx.miniProgram.navigateTo({
                  url: `/pages/intensive_reading/intensive_reading?id=${bookId}`
                })
              } else {//在微信中
                isWeChatApplet =  false
              }
          })
        }

touch事件中的touches、targetTouches和changedTouches

touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：
1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4. 手指滑动时，三个值都会发生变化
5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。

触点坐标选取
touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
　　var e=arguments[0]
　　e.preventDefault()
}

webpack-dev-server 报 [ Invalid Host/Origin header ] 错误

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

rem引起的加载时font-size错误

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

  height:100%;width:100%;
  background-color: #fff;
  top:0;left:0;
  z-index:9999;" ></div>```
在body里加个fixed布局的div，宽度和高度都为100%，背景色为纯白色，等待rem初始化完成后，将这个div隐藏。这个也是之前网易新闻使用rem布局的方案。

## 滚动事件冒泡到下层的元素

## 解决h5页面点击元素出现灰色背景
`div {-webkit-tab-highlight-color: rgba(0,0,0,0); } `

## 滚动穿透的问题
1\. 打开上层的时候body overflowhidden
    关闭上层的时候body overflowauto

### video
通过 Settings|Preferences -> Elements -> Show user agent shadow DOM 打开 shadow DOM 开关后，可以通过 devtools 查看 video 元素的组成部分

### ios兼容性问题汇总
1\. 11.1.2 webview浏览器不支持 es6 扩展运算符 
2\. ios9 document.querySelectorAll 返回的结构和预期不符合

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

<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽：" document.body.clientWidth;
s = " 网页可见区域高：" document.body.clientHeight;
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽：" document.body.scrollWidth;
s = " 网页正文全文高：" document.body.scrollHeight;
s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 网页被卷去的左：" document.body.scrollLeft;
s = " 网页正文部分上：" window.screenTop;
s = " 网页正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的宽：" window.screen.width;
s = " 屏幕可用工作区高度：" window.screen.availHeight;
s = " 屏幕可用工作区宽度：" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话 在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

经本地测试和研究再次对 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指向另一个页面，如下所示

image.png

则iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于ifame的宽度

image.png

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

font-family

禁止双击屏幕缩放

IOS蓝湖上的bold就是font-weight 500

禁止复制

保留文本换行

按住出现黑色背景

p标签内换行

icon 变色

超出变省略号

webView后退时请求有缓存的问题

ios移动端页面橡皮筋效果去除 keyword：`overscroll-behavior:none -webkit-overflow-scrolling : touch;`

ios滑动不流畅

判断是否在小程序中

H5和原生交互

touch事件中的touches、targetTouches和changedTouches

webpack-dev-server 报 [ Invalid Host/Origin header ] 错误

rem引起的加载时font-size错误

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

H5

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

font-family

禁止双击屏幕缩放

IOS蓝湖上的bold就是font-weight 500

禁止复制

保留文本换行

按住出现黑色背景

p标签内换行

icon 变色

超出变省略号

webView后退时请求有缓存的问题

ios移动端页面橡皮筋效果去除 keyword：overscroll-behavior:none -webkit-overflow-scrolling : touch;

ios滑动不流畅

判断是否在小程序中

H5和原生交互

touch事件中的touches、targetTouches和changedTouches

webpack-dev-server 报 [ Invalid Host/Origin header ] 错误

rem引起的加载时font-size错误

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

H5

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

ios移动端页面橡皮筋效果去除 keyword：`overscroll-behavior:none -webkit-overflow-scrolling : touch;`