Cách dùng Giả lập thiết bị website
- Nhập địa chỉ website của bạn và bấm Xem trước.
- Chọn kích thước điện thoại, máy tính bảng, laptop hoặc desktop, sau đó dùng Xoay để xem chế độ ngang.
- Dùng So sánh để xem giao diện trên điện thoại, máy tính bảng và laptop cạnh nhau.
- Thêm kích thước riêng trong mục Thêm thiết bị tùy chỉnh. Chúng sẽ được lưu trên trình duyệt này.
Trình giả lập này hiển thị những gì
Công cụ tải trang của bạn với chiều rộng và chiều cao của một thiết bị, nên bố cục responsive và các breakpoint CSS sẽ hoạt động như khi chạy ở kích thước đó. Nhờ vậy, bạn nhanh chóng phát hiện bố cục bị vỡ, chữ bị cắt và bảng bị tràn.
Những gì công cụ không thể hiện
Đây không phải thiết bị thật. Công cụ không thay đổi engine trình duyệt, nên kích thước iPhone ở đây vẫn chạy trên trình duyệt của bạn. Các tính năng phụ thuộc vào user agent hoặc phần cứng cảm ứng có thể khác. Trước khi ra mắt, hãy kiểm tra trên điện thoại thật, hoặc dùng chế độ thiết bị trong trình duyệt để xem chi tiết hơn.
Vì sao một số website hiển thị trống
Nhiều website gửi header X-Frame-Options hoặc quy tắc frame-ancestors, không cho phép tải trong một trang khác. Khi công cụ phát hiện điều này, nó sẽ hiển thị ảnh chụp màn hình thật ở kích thước thiết bị đó, nên bạn vẫn kiểm tra được bố cục, nhưng liên kết và cuộn trang sẽ không hoạt động. Để chụp toàn bộ trang, hãy dùng công cụ Mobile Website Screenshot.
Kích thước thiết bị có chính xác không?
Các kích thước này là giá trị viewport phổ biến tính bằng pixel CSS, không phải độ phân giải vật lý. Trình duyệt thật bị mất một phần chiều cao do thanh công cụ, nên hãy xem đây là hướng dẫn tương đối.
Cũng được tìm dưới tên: kiểm tra responsive website, test website trên nhiều thiết bị, giả lập iphone online, kiểm tra kích thước màn hình, xem website trên mobile, xem website trên ipad, test responsive online.
Các công cụ dùng kèm tốt với Giả lập thiết bị website
- Công cụ chụp màn hình website — Nhập URL để nhận ảnh chụp màn hình toàn trang được tạo trong trình duyệt Chrome thật — ở chiều rộng máy tính, máy tính bảng hoặc điện thoại và độ phân giải lên đến 3× (Retina), với banner cookie được ẩn đi.
- Kiểm tra độ phân giải màn hình — Kích thước màn hình và cửa sổ trình duyệt tính bằng CSS pixel, tỷ lệ pixel thiết bị và độ phân giải vật lý thực tế, được trình duyệt của bạn đo trực tiếp.
- Test Màn Hình Cảm Ứng — Chạm vào vùng bên dưới để xem màn hình nhận diện được những ngón tay nào.
- Kiểm tra tốc độ trang — Chạy Google Lighthouse trên bất kỳ URL nào, cho cả di động lẫn máy tính.