Javascript Chrome顶栏（URL）正在破坏我的设计

随着我开始学习web开发的旅程，越来越多的问题浮出水面。像这个：

我目前正在学习JS，在掌握新知识的同时，我构建了一些小应用程序，如照片和代码片段中所示

重点是：

我总是用移动优先的方法来构建这些迷你应用程序和网站，主要是因为我想与朋友分享它们，而不想处理媒体查询。我注意到我从Chrome手机模拟器上得到的预览与我在smarthphone上得到的预览有很大不同，至少在高度方面是如此。让我解释一下

当我构建这些小应用程序时，这个问题变得更加明显和明显，我希望它们看起来像本地android或apple应用程序，所以没有滚动，只有视口高度

我最近在CHROME MOBILE SIMULATOR上构建的一个迷你应用程序，在Begging中，它是垂直和水平居中的，但我必须将其向上移动，否则在我的物理设备上，我必须滚动才能看到所有内容

结果-在我的智能手机上

我希望顶部的栏只会向下推内容，我只需要考虑它的高度，就可以有一个“原生应用”的外观（没有滚动），但它看起来有点像是剪切了背景的一部分

我如何才能考虑到这一点，并有一个可预测的结果

这里是应用程序的片段

let button=document.querySelector（“.button”）
let clear=document.querySelector（“.clear”）
让message=document.querySelector（“.message”）
let first=document.querySelector（“.first”）
let second=document.querySelector（“.second”）
let third=document.querySelector（“.third”）
let fourth=document.querySelector（“.fourth”）
设fifth=document.querySelector（“.fifth”）
设sixth=document.querySelector（“.sixth”）
按钮。addEventListener（'单击'，（）=>{
first.innerText=Math.floor（Math.random（）*（90-1）+1）
second.innerText=Math.floor（Math.random（）*（90-1）+1）
third.innerText=Math.floor（Math.random（）*（90-1）+1）
fourth.innerText=Math.floor（Math.random（）*（90-1）+1）
fifth.innerText=Math.floor（Math.random（）*（90-1）+1）
sixth.innerText=Math.floor（Math.random（）*（90-1）+1）
message.classList.add（'show'）
button.disabled=true
setTimeout（函数（）{
button.disabled=false
message.classList.remove（'show'）
}, 1000 * 3) 
})
clear.addEventListener（'单击'，（）=>{
first.innerText=“”
second.innerText=“”
third.innerText=“”
第四，innerText=“”
fifth.innerText=“”
sixth.innerText=“”
})

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景图片：url（'conf.jpg'）；
背景尺寸：封面；
背景重复：无重复；
高度：100vh；
背景位置x：右；
}
.覆盖{
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,3）；
}
.集装箱{
宽度：95vw；
高度：420px；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
边框：1px纯黑；
证明内容：周围的空间；
对齐项目：居中；
文本对齐：居中；
字体系列：helvetica；
位置：绝对位置；
顶部：40vh；
左：50vw；
转换：翻译（-50%，-50%）；
背景：rgba（0,0,0,75）；
颜色：白色；
边界半径：15px；
盒影：0 15px黑色；
垫底：1米；
}
.头衔{
身高：50%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
文本对齐：居中；
字母间距：.5px；
}
h1{
字体系列：verdana；
边框底部：1px纯白；
}
坦塔先生{
字号：1.25em；
}
.数字{
显示器：flex；
宽度：100%；
证明内容：周围的空间；
}
.号码{
宽度：50px；
高度：50px；
边界半径：50%；
边框：1px纯白；
文本对齐：居中；
垂直对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字体系列：tahoma；
字体大小：1.2米；
背景：黑色；
}
.按钮{
填充：.5em 1.5em；
字体大小：1.1米；
边界：无；
背景：白色；
边界半径：5px；
盒影：0 10px黑色；
过渡：.2s线性；
大纲：无；
背景：rgb（0255117）
}
.按钮：激活{
变换：比例（.95）；
}
.清楚{
填充物：2em.5em；
位置：绝对位置；
底部：20px；
右：20px；
边界：无；
背景：白色；
边界半径：5px；
盒影：0 10px黑色；
过渡：.2s线性；
大纲：无；
}
.清除：活动{
变换：比例（.95）；
}
p{
颜色：白色；
文本对齐：居中；
位置：相对位置；
顶部：计算（450px+20vw）；
字体系列：helvetica；
字体大小：1.1米；
保证金：自动；
背景：rgba（0,0,0,45）；
填充物：5em 1em；
显示：无；
}
p、 展示{
显示：块；
}

数字发生器
非sai优质护理？
数字生成器中的算法！
数字属
刷新
Puoi usare号码生成器una volta ogni ora

我认为您面临的问题是移动Chrome（和Safari）将vh设置为固定单元所带来的。也就是说，在没有滚动的情况下，您并没有真正获得完整的垂直高度，因此页面底部的某个位置被切断

这样做的决定是为了防止当用户向下滚动并且浏览器栏消失时出现不舒服的跳跃。对于你正在创建的那种web应用来说，这会让事情变得困难

关于这一点，网络上有很多讨论，例如最近的一篇文章，其中涉及到JavaScript的变通方法

很抱歉，我无法创建一个片段来说明这一点，但我仅限于触摸设备，因此没有