Bài 17: Chạy ngon trên điện thoại — Kiểm tra và tối ưu cho màn hình nhỏ
Giai đoạn 4: BIẾT KIỂM 🔍 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ biết cách kiểm tra sản phẩm trên nhiều kích thước màn hình
- Sau bài này, bạn sẽ biết cách sửa các lỗi responsive (hiển thị trên điện thoại) phổ biến nhất
- Sau bài này, sản phẩm của bạn sẽ đẹp trên cả máy tính, tablet, và điện thoại
💡 Ví Dụ Thực Tế
Chị Hoa tạo landing page bán khóa học yoga. Trên máy tính, trang đẹp “lung linh.” Nhưng khi chị mở trên điện thoại (nơi 80% khách hàng sẽ xem vì chị chạy quảng cáo Facebook/Instagram), trang bị: chữ quá nhỏ phải zoom, hình tràn ra ngoài, 2 cột sản phẩm nằm đè lên nhau, nút CTA nhỏ xíu khó bấm. Chị nhờ AI sửa từng vấn đề, và sau 15 phút, trang xem trên điện thoại đẹp không kém gì trên máy tính.
📚 Kiến Thức Cần Biết
Responsive (đọc là “ri-spon-xíp”) nghĩa là sản phẩm tự động điều chỉnh bố cục để hiển thị đẹp trên mọi kích thước màn hình — từ máy tính to đến điện thoại nhỏ. Giống như nước trong chai — đổ vào cốc thì thành hình cốc, đổ vào bình thì thành hình bình. Website responsive “uốn mình” theo kích thước màn hình.
Tại sao responsive cực kỳ quan trọng? Vì ở Việt Nam, hơn 70% người dùng internet truy cập bằng điện thoại. Nếu website bạn xấu trên điện thoại, bạn mất 70% khách hàng tiềm năng.
Cách kiểm tra responsive trên máy tính (không cần điện thoại thật): mở Chrome, nhấn F12 (hoặc Ctrl+Shift+I), nhấn biểu tượng 2 hình chữ nhật chồng nhau (Toggle device toolbar), chọn thiết bị giả lập: iPhone 14, Samsung Galaxy S21, iPad…
Các lỗi responsive phổ biến: chữ quá nhỏ hoặc quá to; hình ảnh tràn ra ngoài; 2-3 cột không chuyển thành 1 cột trên mobile; nút bấm quá nhỏ khó chạm bằng ngón tay; menu không hiển thị dạng hamburger; bảng (table) tràn ra ngoài khung.
🧪 Thực Hành Từng Bước
Mở sản phẩm của bạn trên Google AI Studio (khung kết quả chat)
Kiểm tra responsive bằng Chrome DevTools:
- Nhấn F12 trên bàn phím
- Nhấn biểu tượng Toggle device toolbar (hình 2 thiết bị chồng nhau, góc trên bên trái cửa sổ DevTools)
- Chọn “iPhone 14 Pro” từ dropdown
- Duyệt toàn bộ trang, ghi lại tất cả vấn đề
⚠️ Lưu ý: Nếu bạn đang xem khung kết quả chat trong AI Studio, bạn cũng có thể thu nhỏ cửa sổ trình duyệt để giả lập màn hình nhỏ. Cách này đơn giản hơn.
Ghi danh sách lỗi responsive. Ví dụ:
- Hero banner: chữ tiêu đề quá lớn, tràn 2 dòng xấu
- Phần sản phẩm: 3 cột không chuyển thành 1 cột
- Nút CTA: quá nhỏ, khó bấm trên điện thoại
- Bảng giá: tràn ra ngoài khung
- Form liên hệ: input quá nhỏ
Gửi yêu cầu sửa cho AI:
Hãy tối ưu website cho hiển thị trên điện thoại (mobile responsive). Hiện tại có các vấn đề sau:
1. Hero banner: chữ tiêu đề quá lớn trên mobile, giảm font-size xuống cho vừa 1-2 dòng
2. Phần sản phẩm: 3 cột trên desktop phải chuyển thành 1 cột trên mobile (breakpoint 768px)
3. Tất cả nút CTA: kích thước tối thiểu 48x48px trên mobile, width 100% trên mobile
4. Bảng (table): chuyển sang dạng card xếp dọc trên mobile thay vì bảng ngang
5. Form: input width 100%, font-size 16px (tránh zoom tự động trên iOS)
6. Padding trái phải tối thiểu 16px trên mobile
7. Hình ảnh: max-width 100%, tự co giãn theo khung
8. Menu: chuyển thành hamburger menu trên mobile, có animation mở/đóng- Nhấn Send, kiểm tra lại trên “chế độ mobile” (thu nhỏ cửa sổ hoặc DevTools)
- Kiểm tra thêm trên tablet (iPad):
- Trong DevTools, chọn “iPad Air”
- Duyệt trang, xem bố cục 2 cột có đẹp không
- Nếu còn lỗi, tiếp tục sửa cho đến khi đẹp trên cả 3 kích thước: desktop, tablet, mobile
✅ Kết Quả Đầu Ra
Sản phẩm của bạn hiển thị đẹp và sử dụng dễ dàng trên cả máy tính, tablet, và điện thoại. Đây là yêu cầu bắt buộc trước khi deploy lên internet.
💡 Mẹo & Lưu Ý
- Ưu tiên sửa mobile trước (vì hơn 70% người dùng là mobile), tablet sau, desktop cuối
- Mẹo kiểm tra nhanh nhất: gửi link Share cho chính mình qua Zalo/Messenger, mở trên điện thoại thật. Không gì thay thế được trải nghiệm thật trên thiết bị thật
- ⚠️ Lỗi thường gặp: Form input trên iPhone bị zoom tự động khi bấm vào — do font-size input nhỏ hơn 16px. Gõ: “Tất cả input trên form phải có font-size tối thiểu 16px để tránh auto-zoom trên iOS.”
📝 Bài Tập Về Nhà
Kiểm tra và tối ưu responsive cho tất cả sản phẩm bạn đã tạo. Thử mở trên điện thoại thật (qua link Share). Nhờ 2 người mở trên điện thoại của họ và cho biết trải nghiệm: có dễ đọc không, dễ bấm không, có chỗ nào bị xấu không.
GIAI ĐOẠN 5: “BIẾT ĐƯA RA THẾ GIỚI”
🏆 Achievement Bài 17
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Deploy sản phẩm lên internet 🚀