iOS 蘋果手機上的 Safari 瀏覽器,用於解析 HTML 的 <input> 標籤時,會有自動放大以讓使用者看的清楚的現象。不過這樣對使用者友善的效果,對於畫面排版來說就是一大挑戰。這邊筆記下網路上流傳可能的解決方法。
內容
目前流傳的作法有以下兩種:
1. 更改 meta viewport,不過會影響使用者體驗
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
2. 將 <input> 的字體大小設置為 16px 以上,這算是最佳解法了。
iOS Safari 本身對於小於 16px 的 <input>,會自動觸發放大功能,但當 <input> 失去焦點時,使用者需要「手動」將畫面再度縮小。這在操作上算是相對惱人的。
參考資料
1. Disable Auto Zoom in Input “Text” tag – Safari on iPhone
2. Input zoom on iOS Safari