terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(mobile): block pinch-zoom and iOS input auto-zoom

Browse Source 
- index.html: tighten the viewport meta with maximum-scale=1,
  user-scalable=no, viewport-fit=cover so pinch-zoom is disabled
  on browsers that honor the hint (Android Chrome).
- SearchPanel: bump the mobile search input from text-sm (14px) to
  text-base (16px). iOS Safari auto-zooms inputs whose font-size is
  below 16px on focus, which widened the viewport and let the user
  pan horizontally; 16px stops that behavior at the source.
This commit is contained in:
TerryM
2026-05-30 01:05:25 +08:00
parent ac208dfe25
commit f7230de12b
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -2,7 +2,10 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<meta name="theme-color" content="#08070c" /> <meta name="theme-color" content="#08070c" />
<meta name="color-scheme" content="dark" /> <meta name="color-scheme" content="dark" />
<meta name="application-name" content="ARK 资料库" /> <meta name="application-name" content="ARK 资料库" />

2
src/components/SearchPanel.tsx
View File

@@ -148,7 +148,7 @@ export function SearchPanel({
onChange={(e) => onQueryChange(e.target.value)} onChange={(e) => onQueryChange(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && onSearch()} onKeyDown={(e) => e.key === "Enter" && onSearch()}
placeholder={t("searchPanelPlaceholder")} placeholder={t("searchPanelPlaceholder")}
className="min-w-0 flex-1 bg-transparent text-sm text-neutral-100 outline-none placeholder:text-[#777985]" className="min-w-0 flex-1 bg-transparent text-base text-neutral-100 outline-none placeholder:text-[#777985]"
/> />
<button <button
type="button" type="button"