微信 网站界面 模板职业技能培训学校

微信 网站界面 模板,职业技能培训学校,汉寿做网站的公司,射洪县住房和城乡建设局网站移动端浏览器和PC端浏览器的100vh区别#xff1b; 在两端window.innerHeight都为512时#xff0c; PC端的100vh的dom.offsetHeight 512; pda端#xff08;移动端#xff09;100vh的dom.offsetHeight 568;#xff08;这就导致了定位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兼容100vhpda上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%;}}原来使用height100vh更改为heightvar(–100vh)