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

窄屏下把输入控件字号提到 16px，避免 iOS 聚焦放大

Browse Source 
- iOS Safari 聚焦字号小于 16px 的输入框时会放大整个页面，且忽略
  viewport 的 user-scalable=no / maximum-scale，只能靠字号规避
- 该规则只在 max-width:600px 生效，1440 桌面端仍是 14px 不变
- viewport 补 maximum-scale=1 作为其他浏览器的兜底
This commit is contained in:
root
2026-09-21 12:42:04 +08:00
parent 9d36c5d654
commit 5208b7ccec
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
@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/asserts/favicon.ico" /> <link rel="icon" href="/asserts/favicon.ico" />
<link rel="stylesheet" href="/src/reset.css" type="text/css"> <link rel="stylesheet" href="/src/reset.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>LionWebsite</title> <title>LionWebsite</title>
</head> </head>
<body> <body>
src/styles/theme.css
+18
View File
@@ -1099,3 +1099,21 @@ button.page-current:hover {
.el-input__inner { .el-input__inner {
font-size: 14px; font-size: 14px;
} }
/* ========== iOS focus-zoom guard (窄屏) ==========
iOS Safari 聚焦字号小于 16px 的输入控件时会放大整个页面，并忽略 viewport
里的 user-scalable=no / maximum-scale。桌面端本身不做调整，只在窄屏（手机
打开桌面入口，或手机横竖屏）下把可聚焦控件拉到 16px；!important 用于压过
Element Plus 的小尺寸变体。 */
@media (max-width: 600px) {
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;
}
}