Bạn có cần truy cập trình giả lập trình duyệt điện thoại thông minh trên PC của mình để kiểm tra phiên bản di động của trang web mà bạn quan tâm không? Có thể bạn là một nhà phát triển web, hoặc bạn muốn trở thành một nhà phát triển và bạn cần mô phỏng một trình duyệt di động cho dự án bạn đang thực hiện. Bất kể^(Regardless) lý do của bạn là gì, đây là cách truy cập trình giả lập trình duyệt di động trong Google Chrome , Mozilla Firefox , Microsoft Edge và Opera:

Cách bật và sử dụng trình giả lập trình duyệt di động trong Google Chrome

Trong Google Chrome , điều hướng đến trang web mà bạn muốn xem trong trình giả lập trình duyệt di động. Sau đó, nhấn tổ hợp CTRL + SHIFT + I trên bàn phím của bạn hoặc bằng chuột, nhấp vào ba dấu chấm dọc ở góc trên cùng bên phải để mở menu “Tùy chỉnh và điều khiển Google Chrome”^{(“Customize and control Google Chrome”)} . Chọn Công cụ khác,^{(More tools, )} tiếp theo là Công cụ dành cho nhà phát triển^{(Developer Tools)} .

Truy cập Công cụ dành cho nhà phát triển^{(Access Developer Tools)} trong Google Chrome

Nhấp hoặc nhấn vào nút “Chuyển đổi thanh công cụ thiết bị”^{(“Toggle device toolbar”)} (nó trông giống như điện thoại thông minh bên cạnh máy tính bảng) 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ụ của thiết bị nơi tải trang di động. Theo mặc định, thanh công cụ của thiết bị sử dụng mẫu Đáp ứng^(Responsive) cho trang web bạn đã tải. Nhấp^(Click) vào nó và chọn thiết bị di động mà bạn muốn mô phỏng. Các tùy chọn của bạn bao gồm nhiều iPhone, iPad, Surface Duo , hai thiết bị Samsung Galaxy và trình mô phỏng trình duyệt di động Moto G4 dành^{(Moto G4 mobile)} cho PC.

Cách bật trình giả lập trình duyệt di động trong Google Chrome

MẸO:^(TIP:) Rất tiếc, bạn chỉ có thể sử dụng phím tắt CTRL + Shift + M sau khi bật các công cụ dành cho nhà phát triển.

Điều hướng^(Navigate) trang web bạn muốn kiểm tra, chuyển đổi giữa các điện thoại thông minh và máy tính bảng khác nhau và xem nó trông như thế nào. Khi bạn hoàn tất, hãy nhấn nút X (Đóng)^{(X (Close))} ở 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 trên máy tính để bàn tiêu chuẩn.

Đóng trình giả lập trình duyệt di động Google Chrome

MẸO:^(TIP:) Nếu bạn là người dùng Google Chrome nặng , bạn cũng có thể muốn tìm hiểu cách sử dụng các tùy chọn điều khiển phương tiện của Google Chrome^{(how to use Google Chrome’s media control options)} .

Cách bật và sử dụng trình giả lập trình duyệt di động trong Mozilla Firefox

Trong Mozilla Firefox , hãy mở trang web mà bạn muốn sử dụng trình mô phỏng trình duyệt di động. Sau đó, nhấn CTRL + Shift + M trên bàn phím của bạn hoặc nhấp vào nút bánh mì kẹp thịt ở góc trên bên phải để mở menu của Firefox và chọn Nhà phát triển web^{(Web Developer)} .

Truy cập các công cụ dành cho Nhà phát triển Web^{(Web Developer)} trong Firefox

Bạn sẽ thấy một menu chứa đầy các công cụ hữu ích cho các nhà phát triển web. Trong danh sách, hãy chọn “Chế độ thiết kế đáp ứng”^{(“Responsive Design Mode,”)} và chế độ xem trang web cụ thể này được tải trong Firefox .

Chọn Chế độ thiết kế đáp ứng^{(Responsive Design Mode)} trong Firefox

Firefox bật Chế độ thiết kế đáp ứng^{(Responsive Design Mode)} . Ở đầu cửa sổ, bạn sẽ thấy các thông số được sử dụng bởi chế độ giả lập 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 Đáp ứng^(Responsive) để mở danh sách thả xuống với các thiết bị có sẵn để mô phỏng, sau đó chọn thiết bị mà bạn muốn mô phỏng.

Bạn có thể mô phỏng trình duyệt di động cho nhiều iPhone, iPad, Kindle Fire ( Firefox là trình duyệt duy nhất cung cấp tùy chọn mô phỏng này) và các thiết bị Samsung Galaxy S9 .

Sử dụng trình giả lập trình duyệt di động trong Firefox

Khi bạn hoàn tất quá trình kiểm tra với trình giả lập trình duyệt trên điện thoại thông minh, hãy nhấn nút X (Đóng Chế độ thiết kế đáp ứng)^{(X (Close Responsive Design Mode))} ở góc trên bên phải của Mozilla Firefox .

Đóng trình giả lập trình duyệt di động trong Firefox

Bạn quay lại chế độ duyệt trên máy tính để bàn tiêu chuẩn.

Cách bật và sử dụng trình giả lập trình duyệt di động trong Microsoft Edge

Microsoft Edge sử dụng cùng một công cụ kết xuất như Google Chrome và cung cấp cùng một trình giả lập trình duyệt trên điện thoại thông minh. Để truy cập chúng, hãy truy cập trang web mà bạn muốn kiểm tra và nhấn tổ hợp CTRL + SHIFT + I trên bàn phím hoặc nhấp vào ba dấu chấm ngang ( “Cài đặt và hơn thế nữa”^{(“Settings and more”)} ) ở góc trên cùng bên phải của Microsoft Edge . Trong menu xuất hiện, hãy chuyển đến Công cụ khác^{(More tools)} rồi đến Công cụ dành cho nhà phát triển^{(Developer Tools)} .

Truy cập các công cụ dành cho nhà phát triển^(Developer) trong Microsoft Edge

Nhấp vào nút “Chuyển đổi mô phỏng thiết bị”^{(“Toggle device emulation”)} (nó trông giống như điện thoại thông minh bên cạnh máy tính bảng) 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ụ giả lập trình duyệt di động. Theo mặc định, nó sử dụng mẫu Đáp ứng^(Responsive) cho trang web bạn đã tải. Nhấp^(Click) vào nó và chọn thiết bị di động mà bạn muốn mô phỏng. Các tùy chọn của bạn bao gồm điện thoại thông minh và máy tính bảng giống như Google Chrome .

Truy cập trình giả lập trình duyệt di động trong Microsoft Edge

Duyệt qua trang web bạn muốn kiểm tra, thay đổi giữa các thiết bị di động khác nhau và xem nó trông như thế nào. Khi bạn hoàn tất, hãy nhấn nút X (Đóng)^{(X (Close))} ở góc trên cùng bên phải của Microsoft Edge.

Đóng trình giả lập trình duyệt di động trong Microsoft Edge

Bây giờ bạn đã quay lại chế độ duyệt trên máy tính để bàn tiêu chuẩn.

Cách bật và sử dụng trình giả lập trình duyệt di động trong Opera

Trong Opera , hãy truy cập trang web 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 ( “Tùy chỉnh và điều khiển Opera”^{(“Customize and control Opera”)} ). Trong menu mở ra, chọn Nhà phát triển^(Developer) , sau đó chọn Công cụ dành cho nhà phát triển^{(Developer tools)} . Nếu bạn thích bàn phím hơn, hãy nhấn tổ hợp CTRL+Shift+I để có kết quả tương tự.

Truy cập các công cụ dành cho nhà phát triển trong Opera

Công cụ dành cho nhà phát triển^{( Developer tools)} được hiển thị ở bên phải của cửa sổ trình duyệt. Nhấp vào nút “Chuyển đổi thanh công cụ thiết bị”^{(“Toggle device toolbar”)} (nó trông giống như điện thoại thông minh bên cạnh máy tính bảng) hoặc nhấn CTRL + Shift + M trên bàn phím của bạn. Thanh công cụ của thiết bị được hiển thị ở bên trái. Theo mặc định, nó sử dụng mẫu Đáp ứng^(Responsive) cho trang web bạn đã tải. Nhấp^(Click) vào nó và chọn thiết bị di động mà bạn muốn mô phỏng từ danh sách các tùy chọn. Opera cung cấp các trình giả lập trình duyệt di động giống như Google Chrome và Microsoft Edge , vì nó dựa trên cùng một công cụ kết xuất ( Chromium ).

Truy cập trình giả lập trình duyệt di động trong Opera

Khi bạn kiểm tra xong, hãy nhấn nút X ( Đóng^(Close) ) ở góc trên cùng bên phải để quay lại chế độ duyệt trên màn hình tiêu chuẩn.

Đóng trình giả lập trình duyệt di động trong Opera

Bạn^(Are) có hài lòng với các tùy chọn mô phỏng trình duyệt di động có sẵn không?

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 yêu thích của mình. Tuy nhiên, bạn có thể nhận thấy rằng hầu hết các trình duyệt web đều cung cấp các tùy chọn mô phỏng giống nhau có lợi cho iPhone và iPad. Nếu bạn muốn mô phỏng điện thoại thông minh hoặc máy tính bảng Android hiện đại , cơ hội của bạn là khá mỏng, ngay cả trong Google Chrome - trình duyệt được phát triển bởi công ty đứng sau Android . Nếu muốn có kết quả tốt nhất, bạn có thể cần sử dụng hai trình duyệt cho tác vụ này: Chrome và Firefox , hoặc Firefox và Edge hoặc Opera . Trước khi bạn đi, hãy cho chúng tôi biết suy nghĩ của bạn về các tùy chọn có sẵn.

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need to access a smartphone browser emulator on your PC to test the mobile version of a website you are interested іn? Maybe you are a web developer, or you want to become one, аnd you need to simulate a mobile browser for the project you are working on. Regardless of your reasоns, herе is how to acсess a mobile browser emulator in Google Chrome, Mozilla Firefox, Microsoft Edge, аnd Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Cách tắt tiếng tab trong Chrome, Firefox, Microsoft Edge và Opera

• Làm thế nào để in một bài báo không có quảng cáo trong tất cả các trình duyệt chính

• Làm thế nào để ghim một trang web vào thanh tác vụ hoặc Start Menu trong Windows 10

• Cách tạo Chrome default browser trong Windows 10 (Firefox & Opera)

• Làm thế nào để thay đổi default browser trong Windows 11

• Cách xuất mật khẩu LastPass của bạn sang tệp CSV

• Trong trường hợp được cookie lưu trữ trong Windows 10 cho tất cả các trình duyệt chính?

• Cách để dành các tab trong Microsoft Edge và sử dụng chúng sau này

• Về InPrivate and Incognito. duyệt web riêng tư là gì? Which browser là tốt nhất?

• Trình duyệt nào sẽ giúp thời lượng pin của bạn lâu hơn trong Windows 10?

• Cách làm mới cứng các trang trong trình duyệt của bạn, trên máy Mac (Safari, Chrome, Firefox và Opera)

• Cách chặn cookie của bên thứ ba trong Chrome, Firefox, Edge và Opera

• Làm thế nào để có được, cấu hình, và loại bỏ các phần mở rộng Microsoft Edge

• Làm thế nào để truy cập ẩn danh trong Chrome, Firefox, Edge, và Opera

• Chrome 64 bit hoặc Chrome 32 bit: Tải xuống phiên bản bạn muốn, dành cho Windows 10 trở lên

• Cách gỡ cài đặt Microsoft Edge từ Windows

• 7 cách mà các trình duyệt nên cải thiện duyệt web ở chế độ riêng tư (Ẩn danh, InPrivate, v.v.)

• Cách sử dụng Microsoft Edge Collections

• Xuất mật khẩu từ Chrome, Firefox, Opera, Microsoft Edge và Internet Explorer

• Cách nhập mật khẩu vào LastPass từ Chrome, Firefox, Opera và Microsoft Edge