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

- 输入控件字号统一提到 16px，规避 iOS Safari 的聚焦自动缩放 - maximum-scale/user-scalable 对 iOS 无效，仅作为其他浏览器兜底 - 用 !important 压过 Element Plus 的 is-small / --small 变体（13~14px）
2026-09-21 12:42:04 +08:00
parent 3a39677bb3
commit dc39e468bb
2 changed files with 19 additions and 1 deletions
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <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>
  <meta name="apple-mobile-web-app-capable" content="yes">
  </head>
@@ -1073,3 +1073,21 @@ body {
    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;
+}