Nếu bạn sử dụng cài đặt meta chế độ xem HTML phổ biến nhất, việc nhấp vào phần tử đầu vào sẽ tự động kích hoạt tính năng thu phóng tự động trên thiết bị iOS. Ít nhất là trên Điện thoại thông minh. Tôi đã thử nghiệm điều này trên iPhone 4, 5 và 6, bằng trình duyệt Safari và Chrome. Dựa trên nghiên cứu của tôi, tất cả các thiết bị iOS đều giống nhau.
Mã HTML này là thứ cho phép hiệu ứng thu phóng tự động xảy ra:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Nhưng hiệu ứng thu phóng tự động này không phải lúc nào cũng mong muốn. Đôi khi nó sẽ ảnh hưởng đến khả năng sử dụng của ứng dụng web của bạn. Nó hoàn toàn phụ thuộc vào ngữ cảnh.
Để tắt hiệu ứng này trên cả Safari và Chrome, thay vào đó bạn có thể sử dụng cách sau:
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
Mã mới duy nhất là chúng tôi đã thêm giá trị maximum-scale=1 vào meta content thuộc tính.
Quan trọng
Điều này không vô hiệu hóa tùy chọn thủ công phóng to và thu nhỏ trong Safari. Nó chỉ tắt chức năng thu phóng tự động.
Nhưng trong trình duyệt dành cho thiết bị di động của Chrome (trên thiết bị iOS), nó không tắt tùy chọn thu phóng thủ công. Đây có thể là một 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 nào cho phép bạn phóng to thủ công trong Chrome. Nếu có, tôi sẽ cập nhật bài viết này.
Một giải pháp đơn giản hơn nhiều
Nếu bạn cung cấp cho các phần tử đầu vào của mình kích thước phông chữ tối thiểu là 16px, trái ngược với 11px mặc định, điều này sẽ loại bỏ hiệu ứng thu phóng tự động trên cả Safari và Chrome. Ít nhất nó đã làm được trong các thử nghiệm của tôi.
Với phương pháp này, bạn có thể tránh thêm giá trị max-scale-1 vào thuộc tính nội dung của mình và do đó tránh hạn chế việc thu phóng thủ công trong Chrome
Chờ đã, tại sao bạn không đề xuất giải pháp này trước?
Chà, bạn có thể không muốn sử dụng kích thước phông chữ 16px trên tất cả các trường nhập liệu của mình trên thiết bị di động. Điều này sẽ buộc bạn phải điều chỉnh kiểu chữ của giao diện người dùng di động để phù hợp với các trường đầu vào của bạn.
Và như với hầu hết mọi thứ, vấn đề này có thể được giải quyết theo chương trình bằng cách sử dụng JavaScript, nhưng điều đó nằm ngoài phạm vi của bài viết này.
Ngoài ra, hãy cẩn thận rằng việc hạn chế người dùng của bạn phóng to thường không được khuyến khích. Thông tin thêm tại W3Schools. Nhưng một lần nữa, nó phụ thuộc vào ngữ cảnh.
Sẽ thật tuyệt nếu có một cài đặt đơn giản có thể giải quyết vấn đề này trên tất cả các thiết bị cùng một lúc. Nếu bạn có bất kỳ thông tin chi tiết nào về chủ đề này, vui lòng cho tôi biết trong phần bình luận bên dưới :-)