Nếu bạn dùng cài đặt meta viewport HTML phổ biến nhất, nhấp vào phần tử input sẽ tự động kích hoạt tự động zoom trên thiết bị iOS. Ít nhất trên điện thoại thông minh. Tôi đã test trên iPhone 4, 5 và 6, dùng Safari và Chrome. Dựa trên nghiên cứu của tôi, nó giống nhau cho tất cả thiết bị iOS.
Mã HTML sau là nguyên nhân cho phép hiệu ứng tự động zoom xảy ra:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Nhưng hiệu ứng tự động zoom này xa xỉ không phải lúc nào cũng mong muốn. Đôi khi nó sẽ làm giảm khả năng sử dụng ứng dụng web của bạn. Tùy thuộc vào ngữ cảnh.
Để tắt hiệu ứng này trên cả Safari và Chrome, bạn có thể dùng mã sau:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />Đoạn mã mới duy nhất là chúng ta thêm giá trị maximum-scale=1 vào thuộc tính content của meta.
Quan trọng
Điều này không tắt tùy chọn thủ công zoom in/out trong Safari. Nó chỉ tắt chức năng tự động zoom.
Nhưng trong trình duyệt Chrome di động (trên thiết bị iOS), nó có tắt tùy chọn zoom thủ công. Điều này có thể là vấn đề, tùy thuộc vào trường hợp sử dụng của bạn.
Tôi chưa tìm thấy giải pháp HTML thuần túy cho phép giữ zoom thủ công trong Chrome. Nếu tìm được, tôi sẽ cập nhật bài viết này.
Giải pháp đơn giản hơn nhiều
Nếu bạn cho phần tử input kích thước font tối thiểu 16px, thay vì mặc định 11px, điều này sẽ loại bỏ hiệu ứng tự động zoom trên cả Safari và Chrome. Ít nhất trong test của tôi nó hoạt động.
Với phương pháp này, bạn có thể tránh thêm giá trị maximum-scale-1 vào thuộc tính content và do đó tránh hạn chế zoom thủ công trong Chrome.
Tại sao bạn không đề xuất giải pháp này trước?
Vâng, bạn có thể không muốn dùng font-size 16px cho tất cả trường input trên mobile. Điều này sẽ buộc bạn phải điều chỉnh typography UI mobile để phù hợp với trường input.
Và như hầu hết mọi thứ, vấn đề này có thể giải quyết bằng chương trình dùng JavaScript, nhưng vượt ra khỏi phạm vi bài viết này.
Cũng lưu ý rằng hạn chế người dùng zoom nói chung không được khuyến khích. Thêm thông tin tại W3Schools. Nhưng lại nói, tùy thuộc vào ngữ cảnh.
Sẽ tốt nếu có một cài đặt đơn giản giải quyết vấn đề này trên tất cả thiết bị cùng lúc. Nếu bạn có hiểu biết về chủ đề này, thoải mái cho biết ở phần bình luận bên dưới :-)