[筆記] iOS Safari 對應 input 框自動放大的解決方法

章節連結

iOS 蘋果手機上的 Safari 瀏覽器,用於解析 HTML 的 <input> 標籤時,會有自動放大以讓使用者看的清楚的現象。不過這樣對使用者友善的效果,對於畫面排版來說就是一大挑戰。這邊筆記下網路上流傳可能的解決方法。
html logo


內容

目前流傳的作法有以下兩種:
1. 更改 meta viewport,不過會影響使用者體驗

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

按讚加入粉絲團

延伸閱讀