lion/lionwebsite-frontend-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复 iOS 聚焦输入框导致的页面放大

Browse Source 
- 输入控件字号统一提到 16px，规避 iOS Safari 的聚焦自动缩放
- maximum-scale/user-scalable 对 iOS 无效，仅作为其他浏览器兜底
- 用 !important 压过 Element Plus 的 is-small / --small 变体（13~14px）
This commit is contained in:
lion
2026-09-21 12:42:04 +08:00
parent 3a39677bb3
commit dc39e468bb
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/asserts/favicon.ico" /> <link rel="icon" href="/asserts/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>LionWebsite</title> <title>LionWebsite</title>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
src/styles/theme.css
+18
View File
@@ -1073,3 +1073,21 @@ body {
padding: 10px 12px 8px; padding: 10px 12px 8px;
} }
} }
/* ========== iOS focus-zoom guard ==========
iOS Safari 会在聚焦字号小于 16px 的输入控件时放大整个页面，而且会忽略
viewport 里的 user-scalable=no / maximum-scale。把可聚焦控件的字号固定到
16px 才是可靠解法；按钮、标签等展示型元素不受影响。
这里用 !important 是必要的：Element Plus 的 .el-select--small / .el-input--small
等变体自带 13~14px 规则，优先级高于普通选择器。 */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.el-input__inner,
.el-textarea__inner,
.el-select__input,
.el-select__wrapper,
.el-input-number .el-input__inner {
font-size: 16px !important;
}