关于移动端适配100vh的问题

最新推荐文章于 2025-05-06 12:04:00 发布

小白记事本_Mr_Wei

最新推荐文章于 2025-05-06 12:04:00 发布

阅读量812

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_59038724/article/details/128190128

版权

需求场景：

因为场景需求做了一个组件需要全局显示modal：height设置100vh

真机出现的问题：浏览器默认顶部会计算在100vh内

故导致modal 顶部显示不全问题

解决方案：通过给modal包一层 div。设置height：100%

即可解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白记事本_Mr_Wei

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端适配

ply6686的博客

10-24

3503

移动端适配是指在不同尺寸的手机设备上，页面能相对达到合理的展示（响应式）或者保持统一效果的等比缩放（看起来差不多）。本文介绍了移动端适配中需要掌握的基本概念和移动端页面开发中常用的适配方案。一、基本概念在做移动端适配之前，我们必须了解一下不同设备之间，显示器或者屏幕究竟有哪些不同。与此相关的概念比较多，也特别容易混淆，这里将对涉及到的主要概念一一介绍。这其中包括硬件中的概念、操作系统或软件中的概念和浏览器中的概念。如果你觉得混乱了，不要着急，就以 iphone6 为例，细细品味。 1、硬件..

谈谈 H5 移动端适配原理

jnfy的博客

08-27

956

H5 移动端开发的必不可少的一个环节就是移动端网页的适配，因为UI通常只会提供大小固定的设计稿，而各种不同移动设备具有不同的页面分辨率和大小，所以适配的目的就是让一份设计稿在不同移动设备上表现出一致性。虽然现如今各种插件都可以帮助我们快速配置完成，例如lib-flexible、postcss-pxtorem、postcss-px-to-viewport等等，但不少小伙伴在被问及相关原理时却很难说清楚，那么本篇文章我们就一起来探究一下其中原理吧！！！

参与评论您还未登录，请先登录后发表或查看评论

在移动端使用100vh被遮盖问题

hw_happy的博客

08-22

6044

在移动端中，我们通常想要某块页面全屏展示而使用height:100vh来实现，但是不同的浏览器在地址栏/工具栏的影响下，实现方式也有区别，使得其无法很好的适配多种浏览器。所以最好避免通过css来设置高度，而是通过js来设置高度，获得完整的视口体验！

移动浏览器100vh高度未适应屏幕大小

txp1993的专栏

04-07

460

移动浏览器100vh高度由于地址栏显示隐藏导致未适应屏幕大小

移动端100vh超出页面出现滚动条问题

qq_55139096的博客

08-08

961

当移动端想要占满屏幕时通常会使用100vh,但是在手机端访问网站时会发现超出的屏幕宽度并出现了滚动条。这是因为移动浏览器（Chrome和Safari）地址栏有时可见有时隐藏，从而改变了视口的可见大小。当视口高度变化时，这些浏览器没有将。高度没变，但是地址栏那块把内容顶出去了一块）。结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时。结局方案2：使用dvh单位(需要考虑兼容性)设置为隐藏了地址栏的浏览器的高度（其实就是。的高度调整为屏幕的可见部分的高度，而是将。然后在需要全屏的页面使用变量。

移动端100vh解决方法

qq_43223007的博客

01-30

1437

开发移动端时用vh开发保证页面一屏显示，开发时以及用安卓手机测试没有问题，但是在safari浏览器却出现滚动条

移动端安卓和苹果浏览器的100vh的区别

qq_43235503的博客

05-30

593

移动端安卓和苹果浏览器的100vh的区别

在移动端使用100vh的过程中遇到了什么问题？怎么解决？

m0_68009075的博客

02-24

1396

在移动端使用100vh的过程中遇到的问题以及解决方案

移动端适配技术详解：从基本概念到rem、vw/vh的实现方案

03-11

内容概要：本文详细介绍了移动端适配的基本概念及其解决方案。首先阐述了设备像素、CSS像素、像素比(DPR)等相关概念及其应用场景，解决了由于高分辨率设备引起的图片显示不清晰的问题。接下来探讨了几种常见的移动端...

b站移动端适配静态网页（运用vw+vh）

12-30

这是一个b站移动端适配静态网页，，适合小白的网页设计作业，用到的有c3、h5,这是一个静态网页，适合用来网页入门的学习，以及练习，这个是博主在刚学习前端时的练手项目，最近在整理电脑文件，准备上传csdn上，分享...

nuxt3 布局，iOS Safari 的 100vh 问题，兼容PC端移动端iOS

weixin_55042716的博客

04-10

733

原先需求要求是顶部和底部是由中间内容撑开的，但是有的页面没内容就撑不开，一开始使用 min-height: calc(100vh - 410px); 但是在iOS手机端下出现问题，

你不应该依赖CSS 100vh，这就是原因

粉丝们务必加入微信粉丝群

08-25

1027

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。在真机检查一下效果：酷!

移动端 100vh 显示 bug

zuo3283574272的博客

10-26

106

移动浏览器（Chrome 和 Safari）有一个“有用”的功能，地址栏有时可见，有时隐藏，从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分，而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是，当地址栏可见时，屏幕的底部将被切断，从而违背了100vh最初的目的。链接：https://juejin.cn/post/7374452765273538595。获取当前视窗的的高度，将高度按 100 份等分，得到视窗的单位高度, 然后通过。

100vh问题及解决方案

weixin_42560424的博客

06-03

1337

100vh问题通常出现在移动端浏览器中，尤其是当你使用100vh设定元素高度时。这是因为移动端浏览器在显示视口高度时会包括地址栏和工具栏，这些栏在滚动时会隐藏，从而导致视口高度发生变化，影响布局。

在移动端别再用 100vh 了！试试这些全新的 CSS 单位

最新发布

粉丝们务必加入微信粉丝群

05-06

1014

但移动端浏览器则不同，其顶部的地址栏和底部工具栏（浏览器 UI）是动态变化的。当用户首次打开页面时，工具栏显示；在桌面浏览器上一切正常，但当页面打开到手机上时，精心设计的页面却总会出现奇怪的截断、异常滚动，甚至布局在浏览器工具栏隐藏或出现时发生位移。并不考虑这个动态变化，它总是以浏览器最大可能的高度为基准，导致页面实际显示内容可能被截断、溢出，用户体验因此严重受损。虽然大多数 CSS 教程都会推荐使用这个单位，但实际上，在移动设备上，必须确保始终在视窗内的内容，比如固定在页面内的按钮、表单或底部导航。

在移动端避免使用100vh

SunSeekerX

12-09

788

在移动端避免使用100vh CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。核心问题是移动浏览器...

解决在移动端css使用100vh底部被遮盖的问题

我的米饭

08-20

865

移动端下，若使用100vh单位，那么高度不会是浏览器可视区域的高度，而是会高于可视区域，所以居底部的元素会被遮盖住：如果是chrome浏览器移动端APP的版本在127以上，则可以直接使用代替 vh 单位。如果127版本以下，那么就需要手动兼容了。

移动端设置height:100vh出现滚动条的解决办法

DOVISK的博客

12-09

945

在许多移动设备上，1vh 的计算基于视口的高度，但某些浏览器（如移动端的 Chrome 和 Safari）会在显示或隐藏地址栏时改变视口高度。这会导致 100vh 的高度并不完全等于设备屏幕的可用高度。

手淘flexible方案轻松解决移动端适配难题

Flexible布局方案是淘宝前端团队开发的一种移动端适配方案，旨在解决不同尺寸、不同分辨率移动设备上的网页适配问题。该方案的核心思想是“动态等比缩放”，即网页中所有元素的尺寸都以视口宽度（viewport width，...