Cách Mô Phỏng Thiết Bị Di động Trong Trình Duyệt Trên Máy Tính để ...

Có những trang web cung cấp nhiều tùy chọn và tính năng hơn khi được truy cập trên thiết bị di động. Khi điều đó xảy ra và bạn sử dụng trình duyệt trên máy tính để bàn, bạn sẽ cảm thấy thất vọng vì trải nghiệm người dùng bị hạn chế mà bạn nhận được. Lần khác, bạn có thể muốn kiểm tra và xem trang web trông như thế nào trên một thiết bị di động cụ thể như iPhone, iPad hoặc điện thoại thông minh Pixel 2. Dưới đây là cách xem (và kiểm tra) trang web dành cho thiết bị di động trên máy tính để bàn:

LƯU Ý: Hướng dẫn này bao gồm Google Chrome, Mozilla Firefox, Opera, Microsoft Edge và Internet Explorer trên Windows. Chuyển đến phần dành cho trình duyệt mà bạn quan tâm, để tìm các bước bạn cần phải thực hiện.

Cách kích hoạt trình mô phỏng trình duyệt trên thiết bị di động trong Google Chrome

Trong Google Chrome, tải trang web di động mà bạn muốn xem. Sau đó, nhấp hoặc nhấn vào ba dấu chấm dọc ở góc trên cùng bên phải. Chúng là nút "Tùy chỉnh và kiểm soát Google Chrome". Trong menu mở ra, chọn Công cụ khác và sau đó chọn "Công cụ dành cho nhà phát triển". Các công cụ phát triển mở. Để đạt được kết quả tương tự, bạn cũng có thể nhấn phím CTRL + Shift + I trên bàn phím của mình.

Nhấp hoặc nhấn vào nút "Chuyển đổi thanh công cụ thiết bị" (đó là một nút nhỏ trông giống như điện thoại thông minh và máy tính bảng gần nhau) hoặc nhấn CTRL + Shift + M trên bàn phím của bạn. Thao tác này sẽ kích hoạt thanh công cụ thiết bị nơi trang di động được tải. Theo mặc định, thanh công cụ thiết bị sử dụng mẫu Responsive cho trang mà bạn đã tải. Click vào nó và chọn thiết bị di động mà bạn muốn mô phỏng: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (từ phiên bản 5 đến iPhone X), iPad và iPad Pro. Trang di động được tải lại như thể bạn đang sử dụng điện thoại thông minh hoặc máy tính bảng mà bạn đã chọn từ danh sách. Nó không biết rằng bạn đang sử dụng một máy tính để bàn.

Khi bạn hoàn tất, hãy nhấn nút X (Đóng) ở góc trên cùng bên phải của các công cụ dành cho nhà phát triển của Google Chrome để quay lại chế độ duyệt web trên máy tính để bàn chuẩn.

Cách kích hoạt trình mô phỏng trình duyệt trên điện thoại di động trong Mozilla Firefox

Trong Mozilla Firefox, mở trang di động mà bạn muốn truy cập như thể bạn đang sử dụng thiết bị di động. Sau đó, nhấp hoặc nhấn vào nút bánh burger ở góc trên cùng bên phải. Nó được đặt tên là "Open menu".

Trong menu mở ra, chọn Nhà phát triển web .

Bạn thấy nhiều tùy chọn hữu ích cho nhà phát triển. Cái mà bạn quan tâm là "Chế độ thiết kế đáp ứng". Nhấp hoặc nhấn vào tùy chọn này. Chế độ xem trang web cụ thể này hiện được tải trong Firefox. Cùng một kết quả có thể đạt được bằng cách nhấn CTRL + Shift + M trên bàn phím của bạn.

Chế độ thiết kế đáp ứng được bật. Ở giữa màn hình, bạn sẽ thấy các thông số được sử dụng bởi chế độ này. Nếu không có thiết bị nào được chọn, hãy nhấp hoặc chạm vào danh sách thả xuống với các thiết bị có sẵn để mô phỏng và chọn mô-đun bạn muốn mô phỏng: Samsung Galaxy S9, iPad, iPhone (từ phiên bản 6 lên đến iPhone X), Kindle Fire HDX, v.v. Trang di động được tải lại như thể nó được tải trên thiết bị di động mà bạn đã chọn để mô phỏng.

Khi bạn hoàn tất, nhấn nút X (Đóng chế độ thiết kế đáp ứng) để quay lại chế độ duyệt web trên máy tính để bàn chuẩn.

Cách kích hoạt trình giả lập trình duyệt di động trong Opera

Trong Opera, tải trang di động mà bạn muốn xem như thể bạn đang sử dụng thiết bị di động. Sau đó nhấp vào biểu tượng Opera ở trên cùng bên trái. Đây là nút "Tùy chỉnh và điều khiển Opera" . Trong trình đơn mở ra, chọn Nhà phát triển được theo sau bởi Công cụ dành cho nhà phát triển . Công cụ dành cho nhà phát triển được hiển thị ở bên phải của cửa sổ trình duyệt. Kết quả tương tự có thể đạt được bằng cách nhấn phím CTRL + Shift + I trên bàn phím của bạn.

Sau đó, nhấp hoặc nhấn vào nút "Chuyển đổi thanh công cụ thiết bị" (đó là một nút nhỏ trông giống như điện thoại thông minh và máy tính bảng gần nhau) hoặc nhấn CTRL + Shift + M trên bàn phím của bạn. Thao tác này kích hoạt thanh công cụ thiết bị nơi trang web của bạn được tải. Click vào nó và chọn thiết bị di động mà bạn muốn mô phỏng: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (từ phiên bản 5 đến iPhone X), iPad và iPad Pro. Trang di động được tải lại bên trong Opera, sử dụng các đặc điểm của điện thoại thông minh hoặc máy tính bảng mà bạn đã chọn từ danh sách.

Khi bạn hoàn tất, nhấn nút X (Đóng) ở góc trên cùng bên phải của các công cụ phát triển của Opera để quay lại duyệt web trên máy tính để bàn.

Cách kích hoạt trình giả lập trình duyệt di động trong Microsoft Edge

Trong Microsoft Edge, tải trang web mà bạn muốn xem như thể bạn đang sử dụng thiết bị di động. Sau đó, nhấp hoặc chạm vào nút "Cài đặt và nhiều hơn nữa" được tìm thấy ở góc trên cùng bên phải của cửa sổ trình duyệt. Biểu tượng của nó trông giống như ba chấm. Nếu bạn đang sử dụng Cập nhật Windows 10 tháng 10 năm 2018, hãy chuyển đến "Công cụ khác" rồi đến "Công cụ nhà phát triển". Nếu bạn đang sử dụng Bản cập nhật Windows 10 tháng 4 năm 2018 trở lên, hãy chọn Công cụ dành cho nhà phát triển F12 . Công cụ dành cho nhà phát triển được mở ở cuối cửa sổ trình duyệt. Bạn có thể đạt được kết quả tương tự bằng cách nhấn F12 trên bàn phím của bạn, cho dù Windows 10 của bạn cũ hay mới.

Bạn thấy một số tab trong Công cụ dành cho nhà phát triển . Nếu bạn thấy Mô phỏng, hãy nhấp hoặc nhấn vào nó. Nếu không, hãy nhấp hoặc nhấn vào mũi tên xuống và trong menu mở ra, hãy chọn Mô phỏng .

Sau đó, nhấp hoặc nhấn vào danh sách thả xuống Thiết bị . Bạn có thể chọn mô phỏng các thiết bị sau: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X và Nexus 6P.

Khi bạn hoàn tất, nhấn nút X (Đóng) ở góc trên cùng bên phải của các công cụ phát triển của Microsoft Edge để quay lại duyệt web trên máy tính để bàn.

Cách kích hoạt trình mô phỏng trình duyệt trên thiết bị di động trong Internet Explorer

Trong Internet Explorer, đến trang di động mà bạn muốn xem như thể bạn đang sử dụng thiết bị di động. Nhấp vào nút Công cụ ở góc trên cùng bên phải hoặc nhấn ALT + X trên bàn phím của bạn. Sau đó, chọn Công cụ dành cho nhà phát triển F12 . Công cụ dành cho nhà phát triển được hiển thị ở cuối Internet Explorer. Cùng một kết quả có thể đạt được bằng cách nhấn F12 trên bàn phím của bạn.

Nhấp hoặc chạm vào tab Mô phỏng và sau đó nhấp vào danh sách thả xuống của Trình duyệt . Ở đây bạn phải chọn Windows Phone làm thiết bị di động của mình và trang web được tải lại như thể bạn đang sử dụng điện thoại thông minh với Windows Phone . Thật không may, Internet Explorer không cung cấp cho bạn tùy chọn để mô phỏng điện thoại thông minh Android hoặc iPhone và iPad.

Khi bạn hoàn tất, nhấn nút X (Đóng) ở góc trên cùng bên phải của công cụ nhà phát triển để quay lại duyệt web trên máy tính để bàn.

Bạn cần mô phỏng thiết bị di động nào trên trang web nào?

Bây giờ bạn đã biết cách mô phỏng tất cả các loại thiết bị di động trong trình duyệt web ưa thích của mình. Trước khi bạn đóng hướng dẫn này, hãy cho chúng tôi biết bạn cần sử dụng trang web nào để sử dụng tính năng mô phỏng này. Chúng tôi rất tò mò. Có phải Instagram (hoặc) nổi tiếng hay một số trang di động khác?