Php*_*Doe 3 css mobile viewport-units
为了使我的标题适合所有视口，我使用了经典的 CSS 规则height: 100vh;，它的工作方式类似于 charm\xe2\x80\xa6，除了在我的手机上。
实际上，屏幕底部的标题比视口高（比应有的高 20 像素或 30 像素）。由于此问题，标题底部的部分内容在移动设备上被隐藏。
\n我尝试使用 Chrome DevTools Console 修复该错误，但当我使用移动视图（所有设备）时一切正常。
\n问题似乎来自我手机上的浏览器地址栏（我使用的是 Chrome）。
\n我缺少什么？如何正确修复？
\n这里有 html：
\n<!DOCTYPE html>\n<html lang="en" dir="ltr">\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n <title>Test</title>\n <link rel="stylesheet" href="style.css">\n </head>\n <body>\n <header>Lorem ipsum</header>\n <main>\n <p>Lorem ipsum</p>\n </main>\n </body>\n</html>\n这里是CSS：
\n@charset "UTF-8";\n\n/** RESET CSS **/\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}\n\n*{margin:0;padding:0;border:0;list-style:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}\n\nheader{\n height: 100vh;\n background: green;\n font-size: 22px;\n}\n\nRic*_*ard 12
不要使用vh单位，尝试 CSS 规则，height: 100dvh 这是动态视口高度，并且大小将根据移动浏览器 UI 状态自动调整，即浏览器地址栏是否可见。当前版本的浏览器（2023 年 7 月）很好地支持它。
| 归档时间： |
|
| 查看次数： |
7115 次 |
| 最近记录： |