Vì chúng ta đang ở trong một thế giới đầu tiên trên thiết bị di động, việc kiểm tra các trang web dễ dàng trên điện thoại di động hoặc trên điện thoại di động ngày càng trở nên quan trọng hơn. Tôi hợp tác với những người làm việc trên các trang web và dịch vụ truyền thông xã hội và tôi muốn khuyến khích họ thường xuyên mở các trang web từ trình duyệt máy tính để bàn của họ trong chế độ xem trên thiết bị di động. Tôi đặc biệt nghĩ đến tính năng "chế độ xem trên thiết bị di động" tích hợp trong trình duyệt, thường bị ẩn trong tất cả các công cụ dành cho nhà phát triển khác mà trình duyệt cung cấp, nhưng tôi rất vui khi xem xét mọi thứ nhanh chóng được thiết lập.

Làm thế nào bạn có thể mở giao diện di động của một trang web từ trình duyệt máy tính để bàn?

Firefox:

• Trong Windows / Linux, nhấn Ctrl+ Shift+M
• Trong macOS, nhấn option+ command+M

Bạn cũng có thể tìm thấy mục menu trong ("Công cụ"), "Nhà phát triển web", "Chế độ thiết kế đáp ứng".

Chrome:

Bạn cần mở "Công cụ dành cho nhà phát triển" trước:

• Trong Windows / Linux, nhấn Ctrl+ Shift+ Ihoặc chỉF12
• Trong macOS, nhấn option+ command+I

Khi các công cụ dành cho nhà phát triển được mở và tập trung, bạn có thể mở thanh công cụ của thiết bị:

• Trong Windows / Linux, nhấn Ctrl+ Shift+M
• Trong macOS, nhấn command+ shift+M

Bạn cũng có thể tìm thấy mục menu bằng cách mở các công cụ dành cho nhà phát triển ("Công cụ khác", "Công cụ Develepor"), sau đó nhấp vào biểu tượng trông giống như một chiếc điện thoại di động trước bảng "Chuyển đổi thanh công cụ thiết bị".

Cuộc đi săn, cuộc hành trình:

Có vẻ như Apple đã tắt mặc định phím tắt để vào chế độ thiết kế đáp ứng. Bạn có thể làm theo hướng dẫn này về cách cấu hình một phím tắt cho nó .

Bạn có thể tìm thấy mục menu bằng cách nhấp vào "Phát triển", "Nhập Chế độ thiết kế đáp ứng". Nếu bạn không thể thấy mục menu "Phát triển", bạn cần bật nó bằng cách mở "Tùy chọn", "Nâng cao" và đánh dấu vào "Hiển thị menu Phát triển trong thanh menu".

Cạnh:

• Nhấn F12để mở các công cụ dành cho nhà phát triển và sau đó Ctrl+ 7để mở "tab Thi đua". Cấu hình thiết bị bạn muốn mô phỏng.

Bạn có thể mở các công cụ dành cho nhà phát triển bằng chuột bằng cách nhấp chuột phải vào trang web và chọn "kiểm tra phần tử".

Câu trả lời của Flimm là chính xác 100%. Chỉ trong trường hợp ghi nhớ các phím tắt là quá nhiều rắc rối, thì nút màu xanh này trong Công cụ dành cho nhà phát triển để chuyển đổi giữa chế độ xem web và chế độ xem trên thiết bị di động / máy tính bảng:

Hoặc với Firefox:

Sau khi bật thanh công cụ của thiết bị, bạn có thể chọn kiểu và kiểu dáng của thiết bị bạn muốn mô phỏng từ menu thả xuống.

Với mục đích thử nghiệm, tôi sử dụng các trang web sau: -

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Cả hai trang web trên đều cho phép tôi xem ứng dụng web của mình ở nhiều độ rộng thiết bị.

Thêm tiện ích mở rộng "trình chuyển đổi tác nhân người dùng" trong trình duyệt của bạn và chỉ định tác nhân người dùng di động. Nếu trang web đủ thông minh , nó sẽ phục vụ bạn phiên bản tối ưu hóa cho thiết bị di động.

Tôi sẽ không đề nghị bất kỳ phần mở rộng cụ thể. Thiết bị lý tưởng nên có sẵn cài đặt sẵn cho trình duyệt di động và khả năng bật hoặc tắt chuyển đổi tác nhân người dùng trên cơ sở mỗi trang web.

Các câu trả lời trên rất phù hợp cho những người thích gắn bó với một trình duyệt hoặc có "không gian làm việc" trên máy tính để bàn hạn chế (ví dụ: màn hình đơn dưới 21 "ở độ phân giải thấp).

Thực sự có một giải pháp thú vị hơn nữa mà tôi đã khám phá gần đây: https://blisk.io/

Tôi sẽ không sử dụng "loại liên kết" cho bất kỳ lợi ích cá nhân nào (Có một "hệ thống dựa trên mã thông báo" mà bạn có thể kiếm tín dụng để có được những thứ như "không gian đám mây nhóm" miễn phí & "tính năng cao cấp" để sử dụng nó), nhưng Blisk thực sự khá hấp dẫn.

"Trình duyệt được xây dựng để phát triển" dựa trên Chromium này cung cấp vô số cách để demo trang trên nhiều thiết bị khác nhau với "khung" dọc ở phía bên trái, giống như bạn thấy Công cụ dành cho nhà phát triển Chrome mặc định ở cột dọc bên phải.

Đó là một cái nhìn. Mặc dù có một số giới hạn đối với "chức năng mở rộng freemium" của nó, nhưng nó vẫn hoạt động rất tốt để "xem trước" cả phiên bản PC và Mobile của các trang / trang web của bạn trong một so sánh song song. Các tính năng trả phí có vẻ khá tốt nếu bạn làm việc trong các nhóm từ xa (mặc dù cá nhân tôi nghĩ rằng nó cần một chương trình "lái thử" tốt hơn trước khi thu hút mọi người về chi phí hàng tháng).

Tiết lộ đầy đủ: có một "giới hạn thời gian" cực kỳ khó chịu mỗi ngày trên phần xem trước trên thiết bị di động (bật / tắt từ biểu tượng ở bên phải của thanh địa chỉ - thay đổi "xem trước thiết bị" từ liên kết nhỏ sang liên kết nhỏ menu ở góc trên bên phải "Hiển thị danh sách thiết bị").

BliskDemoSc mãi

Ngoài ra: Tôi đã tìm thấy một vài thủ thuật thực sự tiện lợi với Tiện ích mở rộng trình duyệt như 2 "Trình chuyển đổi tác nhân người dùng" khác nhau từ Chrome / Firefox đi xa hơn một chút bằng cách cho phép bạn chuyển đổi giữa các chuỗi tác nhân người dùng trình duyệt của các Hệ điều hành khác nhau VÀ các trình duyệt cho họ.

Tôi thích hương vị "esolutions.se" vì dễ dàng thêm các chuỗi tác nhân người dùng tùy chỉnh vào danh sách cho bao nhiêu tùy chỉnh mà bạn muốn (cũng chạy ngoại tuyến, có thể tiện dụng trong một số trường hợp nhất định): https: //chrom.google.com.vn/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Dù sao, đó là 2 xu của tôi. : P