前端踩坑實錄：用 user-scalable=0 擋放大，還有哪些更溫柔的做法？

其實沒有，還是只有那兩招。

這個議題早些年常遇到，即時現在還是常遇到（？
還是一樣重寫解法，專案中有搜尋部分，
在特定型號 iOS 18.4, iPhone 16 Plus 再點開搜尋(input) 會自動放大，
如下圖，我應該都有好好碼到吧（？

會發現 input 焦點後，畫面會被 zoom in 放大，主要原因

• 行動版（特別是 iOS Safari）特定版本下(比如本案是在 iOS 18.4, iPhone 16 Plus下)
  在點擊 input/textarea 時，若字體小於 16px，瀏覽器會自動放大頁面，確保可讀性。

• 現象：畫面被放大後版面跑版、fixed 元素亂飄、使用者體驗怪怪的。

解法有以下：

• 在 viewport meta 加上 user-scalable=0, maximum-scale=1.0，禁止縮放。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  

  • 優點：最省事，立即解決放大問題。（還可以快速指回給 QC 測試）

  • 風險與可近用性：會犧牲無障礙需求（使用者無法放大頁面），對長輩族群與低視力使用者不友善；某些設計規範（如 WCAG）不建議這麼做。 => 但實際上測試還是可以放大，問了一下 AI 大哥表示：

或是 font 調整成 16px，請看[這篇](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone)\，歷經 15 年的 stackoverflow 依然有效:)

但因為這不符合當初設定 PBI，所以就 ry，但以後我一定會記得有 input 說服UI/UX 一定要 16px，否則…

會浪費能量 debug XD

如果以上都做過，發現還是有些許的飄移
放大絕

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0, minimum-scale=1.0" />

maximum-scale=1.0, minimum-scale=1.0 一起設定，但是畫面可能會沒辦法放大縮小（自己在裝置測試看看ㄟ）

本案完結，收工，會不會再過 15 年，此篇依然有效吧(?)