news 2026/10/15 20:10:55

【tips】100vh

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【tips】100vh

移动端浏览器和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)

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/15 16:32:52

异步串行通信及UART硬件工作机制

异步串行通信原理外设电路根据波特率在相应的时间点对引脚上的电平进行采样,并根据采样结果将电平信号转化为相应的数字值(也就是0或1),并且填充到相应的寄存器。这样一个过程就是物理信号转化成数字信号的过程。提出有关问题既然…

作者头像 李华
网站建设 2026/10/15 16:32:13

GLM-4.6V-Flash-WEB模型能否识别风筝飞行姿态与稳定性?

GLM-4.6V-Flash-WEB模型能否识别风筝飞行姿态与稳定性? 在户外放风筝的场景中,新手常会困惑:“我的风筝飞得稳吗?”“线绷得太紧是不是要掉下来了?”这类问题看似简单,却涉及对视觉信息的综合理解&#xff…

作者头像 李华
网站建设 2026/10/15 16:32:19

彻底理解CountDownLatch

CountDownLatch 是 Java 并发包(java.util.concurrent)中一个非常经典且实用的同步工具类,由 Doug Lea 设计。它的核心思想是:让一个或多个线程等待,直到其他线程完成一组操作(“倒计时归零”)后…

作者头像 李华
网站建设 2026/10/15 3:34:18

Free Fs v2.0.0-alpha 已经发布

Free Fs v2.0.0-alpha 作为一次大版本的前置测试版,主要更新聚焦在底层架构优化和功能增强上。本次版本更新亮点下表为你总结了此版本的主要变化:更新类别具体内容与解读存储架构变更移除 MinIO 支持,全面转向 S3 体系。这意味着系统将不再直…

作者头像 李华
网站建设 2026/10/15 16:32:23

GLM-4.6V-Flash-WEB模型在登山路线规划中的图像辅助判断

GLM-4.6V-Flash-WEB模型在登山路线规划中的图像辅助判断多模态AI如何改变户外安全决策? 想象这样一个场景:你正徒步在一条偏僻的山路上,前方路径被碎石覆盖,一侧是陡坡,另一侧植被稀疏。手机信号微弱,地图上…

作者头像 李华
网站建设 2026/10/15 16:32:12

GLM-4.6V-Flash-WEB模型对冻土融化迹象的遥感图像分析

GLM-4.6V-Flash-WEB模型对冻土融化迹象的遥感图像分析 在青藏高原某科研站,研究人员正面对一张来自Sentinel-2卫星的最新遥感图:地表斑驳、水体零散,疑似出现多处热融湖。过去,这样的图像需要数小时的人工判读——比对历史影像、标…

作者头像 李华