Device Mode được cập nhật (kể từ Chrome 49) là một phần không thể thiếu của DevTools trên thiết bị di động đầu tiên và mở rộng DevTools bar chính. Tìm hiểu cách sử dụng các điều khiển của nó để mô phỏng một loạt các thiết bị hoặc responsive đầy đủ.
Kiểm tra khả năng phản hồi của trang web của bạn bằng trình giả lập màn hình của Device Mode.
Lưu các cài đặt trước tùy chỉnh để bạn có thể dễ dàng truy cập chúng sau này.
Device mode không phải là sự thay thế cho testing thiết bị thực. Hãy nhận biết những hạn chế của nó.
Sử dụng các điều khiển viewport
Điều khiển Viewport cho phép bạn test trang web của mình trên nhiều thiết bị khác nhau, cũng như responsive đầy đủ. Có hai chế độ:
Responsive : Làm cho Viewport tự do thay đổi kích thước thông qua handle lớn ở hai bên.
Specific Device (Thiết bị cụ thể) : Khóa Viewport với kích thước khung nhìn chính xác của một thiết bị cụ thể và mô phỏng các đặc điểm nhất định của thiết bị.
Responsive mode
Nên sử dụng Responsive Mode làm chế độ làm việc mặc định. Sử dụng nó trong quá trình phát triển hoạt động của trang web và ứng dụng của bạn và thường xuyên thay đổi kích thước viewport để tạo ra một thiết kế responsive tự do thích nghi với các loại thiết bị thậm chí chưa biết và trong tương lai.
Để tận dụng tối đa Responsive Mode, hãy bật Media Queries Bar.
Tùy chỉnh kích thước viewport
Either drag the big resize handles on the viewport or click into the values in the menu bar for finer grained control. Kéo các tay cầm thay đổi kích thước lớn trên khung nhìn hoặc nhấp vào các giá trị trong thanh menu để kiểm soát chi tiết hơn.
Device-specific mode
Sử dụng Device-specific mode khi bạn sắp kết thúc quá trình phát triển và muốn hoàn thiện trang web của mình trông như thế nào trên các điện thoại di động cụ thể (ví dụ: một iPhone hoặc Nexus nhất định).
Built-in device presets (Các mode device được cài sẵn)
Các device phổ biến nhất ở thời điểm hiện nay được cài sẵn trong danh sách device. Sau khi chọn một device, mỗi cài đặt device như vậy sẽ tự động định cấu hình mô phỏng các đặc điểm nhất định của thiết bị:
- Đặt chuỗi “User Agent (Tác nhân người dùng)” (UA) chính xác.
- Đặt độ phân giải của device và DPI (tỷ lệ pixel của device).
- Giả lập các touch event (nếu có).
- Mô phỏng thanh cuộn di động và meta viewport.
- Tự động hóa tăng giảm kích thước văn bản cho các trang mà không có viewport được xác định. Thêm cài đặt device tùy chỉnh Device Mode cung cấp một loạt các thiết bị để mô phỏng. Bạn có thể thêm một thiết bị tùy chỉnh nếu bạn tìm thấy một edge-case device hoặc thiết bị thích hợp mà chưa được bảo đảm.
Để thêm một thiết bị tùy chỉnh:
- Chuyển đến DevTools Settings.
- Click vào Devices tab.
Tại đây bạn có thể chọn thêm các device mà tool hỗ trợ sẵn của tool.
- Click vào Add custom device để add thêm device mà bạn cần test nhưng chưa có trong list hỗ trợ sẵn của tool.
- Nhập các thông số của deivce mà bạn muốn add thêm (device name, width, height, device pixel ratio, và user agent string).
- Click Add. Device tùy chỉnh của bạn hiện có trong menu Thiết bị dropdown. Trạng thái device và định hướng
Khi mô phỏng một thiết bị cụ thể, thanh công cụ Device Mode hiển thị một điều khiển bổ sung chủ yếu phục vụ như một cách để chuyển hướng giữa ngang (landscape) và dọc (portrait). Trên các thiết bị được chọn, điều khiển không chỉ chuyển hướng. Đối với các thiết bị được hỗ trợ như Nexus 5X, bạn sẽ có một danh sách thả xuống cho phép bạn mô phỏng một số trạng thái thiết bị nhất định, như:
UI trình duyệt mặc định
Với thanh điều hướng Chrome
Với bàn phím mở
*Zoom to fit (Thu phóng cho vừa)
*Đôi khi, bạn sẽ muốn kiểm tra một thiết bị có độ phân giải lớn hơn không gian có sẵn thực tế trong cửa sổ trình duyệt của bạn. Trong những trường hợp này, tùy chọn Zoom to Fit sẽ có ích:
- Fit to Window sẽ tự động đặt mức thu phóng phù hợp với không gian có sẵn tối đa.
- Tỷ lệ phần trăm rõ ràng là hữu ích nếu bạn muốn kiểm tra DPI trên hình ảnh, ví dụ.
Optional controls (touch, media queries, DPR, …)
Điều khiển tùy chọn có thể được thay đổi hoặc kích hoạt bằng cách nhấp vào ba dấu chấm nhỏ ở bên phải của thanh công cụ thiết bị. Các tùy chọn hiện tại bao gồm
User agent type (Loại tác nhân người dùng) (Emulates UA và touch events)
Tỷ lệ pixel của thiết bị
Media Queries (Truy vấn Media)
Rulers
Configure Network (Cấu hình mạng) (UA, Network Throttling (Điều chỉnh mạng))
