jianguo
/
wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 更新样式以支持移动端适配，添加底部安全区域和隐藏横向溢出

This commit is contained in:
Lexcubia 2025-04-21 11:47:15 +08:00
parent 3b842e0b48
commit 6bc2b53381
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/style.css
View File

@ -26,6 +26,8 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
height: -webkit-fill-available; /* 移动端浏览器兼容 */
overflow-x: hidden;
/* display: flex; /* display: flex;
place-items: center; place-items: center;
min-width: 320px; */ min-width: 320px; */
@ -66,6 +68,26 @@ button:focus-visible {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: normal; font-weight: normal;
/* 添加底部安全区域 */
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
html {
height: -webkit-fill-available;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
#app {
min-height: 100vh;
min-height: -webkit-fill-available;
}
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {