惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

aimingoo的专栏
aimingoo的专栏
腾讯CDC
Y
Y Combinator Blog
L
LangChain Blog
B
Blog
U
Unit 42
P
Proofpoint News Feed
G
Google Developers Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 【当耐特】
WordPress大学
WordPress大学
月光博客
月光博客
Vercel News
Vercel News
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
MyScale Blog
MyScale Blog
大猫的无限游戏
大猫的无限游戏
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
酷 壳 – CoolShell
酷 壳 – CoolShell
Blog — PlanetScale
Blog — PlanetScale
博客园 - 司徒正美
云风的 BLOG
云风的 BLOG
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 叶小钗

个人技术分享

GPT指令详细资料 – 个人技术分享 php操作cookie 转换数组形式,可取某一个值 – 个人技术分享 php操作cookie字符串,替换对应值 – 个人技术分享 php 操作cookie值 – 个人技术分享 js 引入vconsole – 个人技术分享 fastadmin appendfieldlist 用法 – 个人技术分享 PHP 转到 Go – 个人技术分享 PHP使用无头浏览器如何帮助数据提取和抓取 – 个人技术分享 Python框架 Flask和Django – 区别 – 个人技术分享 PHP To Go 转型手记 – 个人技术分享 真正的50行css代码实现响应式“瀑布流”布局 – 个人技术分享
解决移动设备上的所有浏览器顶部都有地址栏,导致高度问题 – ...
hanhanjun888 · 2024-07-19 · via 个人技术分享

解决此问题的最佳方法是什么。显然,移动设备上的所有浏览器顶部都有一个 UI(地址栏等)。这为视口增加了额外的高度,因此我使用 100vh 的网站缺少一个部分。
因此,我假设不同的浏览器具有不同大小的视口,我可以简单地执行类似 height: calc(100vh – 50px) 之类的操作,或者高度是多少,但它不会在所有移动浏览器上匹配,对吧?

//通常 100vh 高度将解释调整后的高度,这就是为什么当浏览器的地址栏向下滑动时有时您会看到移动页面变得时髦的原因。
//对于不考虑 vh 单元中的滑动条的浏览器:地址栏的高度在浏览器中不会保持不变,所以我建议不要附加 -50px .
//尝试使用 window.innerheight 属性设置页面的高度(使用 javascript)。
function adjustHeight() {
    // alert("宽度:"+window.innerWidth+"高度:"+ window.innerHeight)
    var vh = window.innerHeight;
    document.getElementById('messageContent').style.height = (vh - 50) + 'px'; // 假设地址栏高度大约为50px
}
window.addEventListener('resize', adjustHeight);
window.addEventListener('load', adjustHeight);