Mô phỏng viewport với Device Metrics trên Chrome

Khi xây dựng hoặc tạo mẫu cho một trang web có tính đáp ứng (responsive), bạn cần kiểm tra trang web ở nhiều kích thước viewport (khung nhìn - phần mà người dùng sẽ thấy nội dung trang web hiển thị) để kiểm tra xem bố cục và các trang có được hiển thị tốt không. Có một số cách để làm điều này, chẳng hạn như sử dụng Adobe Edge Inspect hoặc tiện ích mở rộng trình duyệt như Dimensions for Chrome.

Vấn đề là những công cụ này không phải lúc nào cũng hoạt động trơn tru trong mọi trường hợp. Adobe Edge Inspect yêu cầu máy tính xách tay và thiết bị di động phải được kết nối với cùng một mạng không dây. XIP.io cũng yêu cầu thiết bị kết nối với Internet và theo kinh nghiệm của nhiều người, việc gỡ lỗi trang web responsive theo iframe rất khó khăn hoặc phải thay đổi kích thước cửa sổ trình duyệt nhiều lần.

Mô phỏng kích thước viewport bằng Device Metrics

Google Chrome gần đây đã giới thiệu một tính năng tích hợp mới, có thể khắc phục tất cả các vấn đề được đề cập ở trên. Tính năng mới này được gọi là Device Metrics. Để kích hoạt Device Metrics, hãy mở Developer Tools Setting.

Đi đến bảng điều khiển Override. Chọn Device metrics và bạn có thể chỉ định kích thước cho viewport.

Kết quả sẽ hiển thị ngay lập tức.

Bạn có thể hoán đổi chiều dài với chiều rộng và chiều cao bằng cách nhấp vào nút bên cạnh các trường nhập.

Nếu không chắc chắn về độ phân giải màn hình được sử dụng, bạn cũng có thể thay đổi User Agent của trình duyệt. Và các trường nhập kích thước màn hình sẽ được điền bằng kích thước viewport thực tế từ User Agent được chọn.

Ví dụ: chọn "Android 2.3 - Nexus S" sẽ đặt kích thước thành 480 x 800pixel, chọn "iPad - iOS5" sẽ đặt kích thước thành 1024 x 728pixel.

Bạn có thể tìm thấy một danh sách đầy đủ các kích thước viewport thiết bị di động trong Screensiz.es.

Google Chrome có rất nhiều tính năng hữu ích giúp hợp lý hóa quá trình phát triển. Giờ đây, bằng cách sử dụng Device Metrics, bạn có thể gỡ lỗi trang web để có kích thước viewport cụ thể mà không phải xử lý kết nối bị hạn chế, sử dụng tiện ích mở rộng trình duyệt của bên thứ ba hoặc tìm kiếm iframe.

Chúc bạn thực hiện thành công!