六安市网站建设_网站建设公司_后端工程师_seo优化

移动端浏览器和PC端浏览器的100vh区别；

在两端window.innerHeight都为512时，
PC端的100vh的dom.offsetHeight === 512;
pda端（移动端）100vh的dom.offsetHeight === 568;（这就导致了定位100vh上的底部的元素被底部导航栏遮挡）

window.visualViewport.height// 等于100vh，物理视口高度window.innerHeight// 可用视口高度，纯净无遮挡

重新设置100vh的值

body{height:100%;margin:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;}// pc :root{--100vh:100vh;--pda-bottom:0;}// pda兼容100vh，pda上100vh > body的100%@supports(bottom:env(safe-area-inset-bottom)){:root{--pda-bottom:calc(100vh - 100%);/* body的100%与pda设备的实际100vh的差值也就是移动端浏览器底部导航栏的高度 */--100vh:100%;/* 等价与body的100%*/}}@supports(bottom:constant(safe-area-inset-bottom)){:root{--pda-bottom:calc(100vh - 100%);--100vh:100%;}}

原来使用height：100vh更改为height：var(–100vh)