Mẹo nhỏ: Fix lỗi Safari iOS tự động zoom khi nhập liệu form

Nếu anh em khó tính mà để ý thì sẽ gặp tình huống: trên iPhone/iPad, khi người dùng chạm vào ô nhập liệu (input, textarea, select) có font-size < 16px, Safari sẽ tự động phóng to (zoom in).

👉 Điều này gây khó chịu vì layout bị vỡ, người dùng phải zoom out lại để xem trang.

Thường thì trên blogspot chúng ta hay thấy nó bị ở khung tìm kiếm tùy vào 1 số template. Anh em có thể xem ảnh minh họa dưới đây:

Fix lỗi Safari iOS tự động zoom khi nhập liệu form

Giải pháp: Ép font-size ≥ 16px chỉ cho iOS Safari

Không cần tăng font-size trên toàn bộ web, chúng ta có thể target riêng Safari iOS nhờ @supports (-webkit-touch-callout: none).

Code CSS đầy đủ:

/* Chỉ target Safari iOS */ @supports (-webkit-touch-callout: none) { input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], textarea, select { font-size: 16px !important; } }

📌 Giải thích:

• @supports (-webkit-touch-callout: none) → chỉ Safari trên iOS nhận.
• Liệt kê đầy đủ các loại input thường gặp + textarea, select.
• Ép font-size: 16px để tránh bị zoom.

Android và Desktop thì sao?

• Android (Chrome, Firefox, Samsung Internet...): không bị ảnh hưởng, font nhỏ vẫn nhập bình thường.
• Desktop browsers: cũng không bị tác động vì đoạn CSS này chỉ áp dụng cho Safari iOS.

Kết luận

Chỉ cần thêm vài dòng CSS là anh em có thể fix được lỗi Safari iOS tự zoom input mà không phá vỡ thiết kế trên Android hay desktop. Đây là mẹo nhỏ nhưng cực kỳ hữu ích khi làm web responsive.