Nếu trang có thể bị kéo ngang ngoài ý muốn, một thành phần nào đó có thể đang rộng hơn màn hình. Ẩn phần tràn toàn website đôi khi làm thanh cuộn biến mất nhưng cũng cắt mất thông tin. Cần tìm phần tử gây lỗi trước, rồi chọn cách hiển thị phù hợp với loại nội dung đó.
Tái hiện ở đúng chiều rộng bị lỗi
Ghi URL, thiết bị, chiều xoay màn hình và trạng thái giao diện. Một trang có thể bình thường khi menu đóng nhưng tràn khi menu mở. Lỗi cũng có thể chỉ xuất hiện sau khi biểu mẫu hiện thông báo, ảnh tải xong hoặc người dùng phóng to chữ.
Dùng chế độ kiểm tra kích thước trên máy tính để thu hẹp vùng lỗi, sau đó xác nhận lại bằng điện thoại. Kiểm tra từ đầu đến cuối trang. Một khối ở chân trang vẫn có thể kéo rộng toàn bộ nội dung dù phần đầu trông bình thường.
Kiểm tra những thành phần thường quá rộng
Ảnh, video và bản đồ có chiều rộng cố định cần được đặt trong vùng chứa thích ứng. Với hàng cột, xem tổng chiều rộng, khoảng cách và phần đệm có vượt vùng chứa không. Những từ dài, URL hoặc mã không có điểm ngắt cũng có thể giữ cả khối rộng hơn dự kiến.
Bảng dữ liệu cần cách xử lý riêng. Nếu các cột phải giữ quan hệ với nhau, vùng cuộn ngang có chỉ dẫn có thể phù hợp. Nếu bảng chỉ so sánh vài thông tin đơn giản, chuyển cách trình bày thành từng nhóm có thể dễ đọc hơn. Không ép chữ nhỏ đến mức khách phải phóng to mới xem được.
Sửa theo phạm vi nhỏ nhất
Nếu lỗi chỉ đến từ một khối, giới hạn thay đổi tại khối đó trước. Đừng áp một quy tắc chung cho mọi ảnh hoặc mọi bảng mà không kiểm tra các trang khác. Cùng một loại khối có thể được dùng cho logo, thư viện ảnh và biểu đồ với yêu cầu khác nhau.
Với nội dung dài, chọn cách ngắt dòng phù hợp để không làm sai nghĩa hoặc khó sao chép. Với vùng cuộn chủ đích, cần để người dùng nhận biết còn nội dung bên cạnh. Mục tiêu là giữ thông tin tiếp cận được, không đơn thuần làm trang hết thanh cuộn ngang.
Kiểm tra các trạng thái sau sửa
Thử menu mở, thông báo lỗi biểu mẫu, video đang phát và chế độ chữ lớn hơn. Kiểm tra cả màn hình hẹp lẫn máy tính để tránh làm bố cục rộng bị méo. Lưu URL và ảnh kết quả cho những trang đại diện có cùng thành phần.
Bạn có thể gửi trang bị tràn ngang cho Tý Hon, kèm thao tác gây lỗi. Phạm vi nên xác định khối cần sửa và các trang dùng chung, để kiểm tra đầy đủ thay vì chỉ che phần bị vượt ra ngoài.
Tham khảo: Các mẫu giao diện thích ứng.
