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

Khi thành lập hoặc tạo mẫu cho 1 trang web có độ đáp ứng (responsive), bạn cần kiểm tra trang web ở nhiều kích 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 bao giờ cũng hoạt động trơn tru trong mỗi trường hợp. Adobe Edge Inspect đòi hỏi máy tính xách tay và thiết bị di động phải được kết nối với và một mạng không dây. XIP.io cũng đòi hỏi 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 không dễ 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 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 mọi thứ các vấn đề được nhắc đến ở 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ũng có thể chỉ định kích cỡ cho viewport.

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

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

Nếu không chắc chắn về độ nét màn hình được sử dụng, bạn cũng cũng đều có thể thay đổi User Agent của trình duyệt. Và các trường nhập kích cỡ màn hình sẽ được điền bằng kích 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 cỡ thành 1024 x 728pixel.

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

Google Chrome có rất nhiều tính năng có ích giúp hợp lý hóa công đoạn phát triển. Giờ đây, bằng cách sử dụng Device Metrics, bạn cũng 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 thi hành thành công!

Device Metrics,chrome,mô phỏng viewport,mô phỏng viewport bằng Device Metrics

Nội dung Mô phỏng viewport với Device Metrics trên Chrome được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.