获取屏幕高度

2019-08-21  本文已影响0人  haha2333

想要网页自适应,无论如何都要先获取屏幕高度,给最外层的div,有利于也里面的布局。
vue中获取屏幕宽高的方法:

data () {
    return {
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, // 屏幕尺寸
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 屏幕尺寸
    }
  }

这些参数是什么意思?根据你的需求选择吧
window.innerWidth:浏览器视口(viewport)宽度(单位:像素),如果存在垂直滚动条则包括它。
document.documentElement.clientWidth:获得的是屏幕可视区域的宽高,不包括滚动条与工具条
document.body.clientWidthdocument.body.clientWidth获得的也是可视区域的宽度,但是document.body.clientHeight获得的是body内容的高度

然后把他挂到节点上:

  <div class="yuqincontainer" :style="{width:screenWidth+'px',minHeight:screenHeight+'px'}">

对于iphonex的长机型,选择min-height是个不错的选择。
名称要采用驼峰命名法。

上一篇 下一篇

猜你喜欢

热点阅读