Cách làm cho website tương thích di động

Để làm cho website tương thích di động, hãy thêm thẻ meta viewport, xây dựng bố cục theo hướng mobile-first với chiều rộng linh hoạt, và dùng breakpoint CSS để sắp xếp lại trên màn hình lớn hơn — xếp chồng các cột, thu gọn menu và co giãn ảnh cho vừa khung. Sau đó kiểm tra mọi trang ở chiều rộng điện thoại để tìm thanh cuộn ngang, chữ quá nhỏ và nút quá nhỏ không chạm được. Với website do AI xây dựng, một prompt rõ ràng cộng với một lượt kiểm tra trong bản xem trước kích thước điện thoại thường sửa được phần lớn vấn đề.

Thiết kế responsive thực sự là gì

Một website responsive dùng một bộ trang và URL duy nhất thích ứng theo màn hình. Thay vì một website "m." riêng, CSS thay đổi bố cục tại những chiều rộng nhất định, gọi là breakpoint. Các thành phần cơ bản:

• Thẻ meta viewport yêu cầu trình duyệt di động dùng đúng chiều rộng thật của thiết bị.
• Bố cục linh hoạt dùng phần trăm, flexbox và grid thay vì chiều rộng pixel cố định.
• Media query (hoặc các class của framework như md: của Tailwind) thay đổi bố cục trên một chiều rộng nhất định.
• Media linh hoạt — ảnh và video co lại để vừa với khung chứa.

Điều này quan trọng vì phần lớn lưu lượng truy cập của bạn có thể đến từ điện thoại, và vì Google lập chỉ mục phiên bản di động của các trang. Nếu nội dung hoặc liên kết chỉ có trên máy tính, Google cũng có thể không thấy chúng.

Các lựa chọn và đánh đổi

Mobile-first thường đơn giản hơn: một cột là bố cục dễ nhất, và thêm cột khi có thêm chỗ thì ít việc hơn là bỏ bớt cột.

Những phần thường bị lỗi

Thẻ viewport

Nếu một trang trông như một website desktop nhỏ xíu trên điện thoại, thì thiếu thẻ viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Đừng thêm maximum-scale=1 hay user-scalable=no. Chặn thu phóng bằng hai ngón làm website khó dùng hơn với người có thị lực kém.

Chiều rộng cố định và cuộn ngang

Lỗi responsive phổ biến nhất là một thứ rộng hơn màn hình: một container width: 1200px cố định, một bảng rộng, một URL dài hoặc khối code, một ảnh không có max-width: 100%. Khi đó cả trang cuộn ngang. Hãy dùng max-width thay cho width, để chữ tự xuống dòng, và cho những thứ rộng một vùng cuộn riêng.

Điều hướng

Năm liên kết menu trên máy tính hiếm khi vừa trên điện thoại. Cách thường dùng là một nút menu mở ra một bảng. Giữ hai hoặc ba hành động quan trọng nhất hiển thị — "Đặt chỗ", "Giỏ hàng", "Đăng nhập" — và đảm bảo menu hoạt động được bằng bàn phím và dễ đóng.

Chữ và vùng chạm

• Chữ nội dung khoảng 16 px là mức tối thiểu hợp lý trên điện thoại. Ô nhập có chữ nhỏ hơn khiến iPhone phóng to khi chạm vào.
• Làm cho nút và liên kết dễ chạm. WCAG 2.2 AA đặt mức tối thiểu 24 x 24 pixel CSS (hoặc đủ khoảng cách); khoảng 44 pixel thoải mái hơn cho ngón tay cái.
• Chừa khoảng trống giữa các liên kết liền kề để người dùng không bấm nhầm.

Bảng và dữ liệu

Bảng rộng là phần khó nhất của một ứng dụng responsive. Các lựa chọn, theo thứ tự ưu tiên: hiển thị ít cột hơn trên điện thoại, biến mỗi hàng thành một thẻ, hoặc đặt bảng vào một khung cuộn ngang với cột đầu được ghim. Hãy chọn dựa trên việc người dùng cần so sánh điều gì.

Ảnh và media

Dùng max-width: 100% và height: auto, phục vụ tệp nhỏ hơn cho màn hình nhỏ bằng srcset, và đặt chiều rộng và chiều cao để tránh bố cục nhảy. Video và bản đồ nhúng cần một lớp bọc responsive để giữ tỷ lệ khung hình. Ảnh nhỏ hơn cũng làm trang nhanh hơn — xem cách làm website nhanh hơn.

Biểu mẫu

Xếp nhãn phía trên ô nhập, làm ô nhập rộng toàn bộ, và dùng đúng loại đầu vào (type="email", type="tel", inputmode="numeric") để điện thoại hiển thị đúng bàn phím. Đặt nút gửi ở chỗ ngón cái với tới được và giữ nó hiển thị khi bàn phím mở.

Tương tác chỉ có khi rê chuột

Điện thoại không có hover. Tooltip, dropdown và xem trước chỉ hiện khi rê chuột thì người dùng cảm ứng không thấy. Hãy làm cho chúng hoạt động cả khi chạm.

Các prompt hiệu quả

Với một bản dựng mới, hãy nói ngay từ đầu:

Xây dựng theo hướng mobile-first. Một cột trên điện thoại, hai cột từ chiều rộng máy tính bảng, bố cục đầy đủ trên máy tính. Không cuộn ngang ở chiều rộng 320 px, chữ nội dung ít nhất 16 px, vùng chạm ít nhất 44 px, một nút menu trên màn hình nhỏ, và các bảng biến thành thẻ trên điện thoại.

Với một trang đã có, hãy mô tả những gì bạn thấy:

Trên điện thoại, trang /pricing bị cuộn ngang và ba thẻ gói bị ép cạnh nhau. Xếp các thẻ theo chiều dọc dưới 768 px, làm bảng so sánh cuộn ngang trong khung riêng của nó với cột tính năng được ghim, và giữ nguyên bố cục máy tính.

Kiểm tra mọi trang ở chiều rộng 375 px. Liệt kê mọi thứ bị tràn, chồng lên nhau, chữ nhỏ hơn 16 px hoặc vùng chạm nhỏ hơn 44 px, hoặc chỉ hoạt động khi rê chuột, rồi sửa từng cái.

Từng bước

1. Xác nhận thẻ viewport có trong phần đầu trang.
2. Kiểm tra ở chiều rộng 320–375 px trong chế độ thiết bị của trình duyệt hoặc bản xem trước kích thước điện thoại. Cuộn mọi trang từ trên xuống dưới.
3. Sửa cuộn ngang trước. Tìm phần tử quá rộng; mọi thứ khác khó đánh giá cho đến khi nó được xử lý.
4. Sắp xếp điều hướng: nút menu, các hành động chính hiển thị.
5. Kiểm tra chữ, vùng chạm và biểu mẫu trong từng luồng chính — đăng ký, tìm kiếm, thanh toán, liên hệ.
6. Xử lý bảng và media: thẻ hoặc khung cuộn, ảnh và nhúng responsive.
7. Kiểm tra các kích thước trung gian. Kéo chậm chiều rộng từ điện thoại lên máy tính; bố cục thường vỡ quanh chiều rộng máy tính bảng.
8. Kiểm tra trên điện thoại thật. Trình giả lập bỏ sót những thứ như bàn phím ảo che nút, tai thỏ/notch, và tốc độ trang trên dữ liệu di động.

Lỗi thường gặp

• Chỉ kiểm tra ở một kích thước điện thoại. Hãy kiểm tra một điện thoại nhỏ, một điện thoại lớn và một máy tính bảng.
• Ẩn nội dung trên di động để cho vừa. Google lập chỉ mục phiên bản di động, và người dùng điện thoại muốn cùng thông tin.
• Tắt thu phóng trong thẻ viewport.
• Ảnh kích thước máy tính trên điện thoại, làm tốn thời gian tải và dữ liệu.
• Các phần tử cố định chồng chất: một header dính, banner cookie và bong bóng chat có thể che nửa màn hình điện thoại.
• Cửa sổ bật lên không đóng được trên màn hình nhỏ vì nút đóng nằm ngoài màn hình.

Danh sách kiểm tra di động

• Có thẻ meta viewport; không tắt thu phóng
• Không cuộn ngang ở 320 px trên mọi trang
• Chữ nội dung khoảng 16 px; ô nhập không kích hoạt phóng to
• Vùng chạm đủ lớn và có khoảng cách
• Menu hoạt động trên điện thoại và bằng bàn phím
• Bảng đọc được trên điện thoại (thẻ, ít cột hơn hoặc khung cuộn)
• Ảnh và nhúng co giãn được; phục vụ tệp có kích thước phù hợp
• Biểu mẫu dùng đúng loại đầu vào; nút gửi với tới được
• Không có nội dung quan trọng nào phụ thuộc vào hover
• Đã kiểm tra trên ít nhất một điện thoại thật

Bố cục responsive cũng là một phần của khả năng truy cập: WCAG yêu cầu nội dung hoạt động ở chiều rộng 320 px và ở mức thu phóng 200%. Nếu bạn đang xây dựng một ứng dụng mà người dùng sẽ dùng hằng ngày trên điện thoại, cách xây dựng ứng dụng web thân thiện với di động đi xa hơn, bao gồm các PWA có thể cài đặt.

Thiết kế responsive trên Mythex

Mythex xây dựng các web app responsive, và với gói Pro có thể đóng gói chúng thành ứng dụng Android và iPhone. Trong không gian làm việc, nhấp vào biểu tượng điện thoại phía trên Preview (Switch to Mobile) để xem ứng dụng trong khung kích thước điện thoại, và kéo cạnh khung để thử các chiều rộng khác (Preview and Code). Tài liệu có một prompt khởi đầu ngắn để sửa bố cục màn hình nhỏ trong prompt cho responsive trên di động. Hãy kiểm tra trên điện thoại thật — mở URL đã xuất bản, hoặc chia sẻ liên kết xem trước và mở nó trên điện thoại của bạn.

Câu hỏi thường gặp