VietNetwork.Vn

Nếu bạn là nhà phát triển web hoặc sở hữu một doanh nghiệp trực tuyến, bạn có thể tò mò muốn biết trang web dành cho thiết bị di động trông như thế nào trên máy tính để bàn. Giao diện và chức năng của trang web dành cho thiết bị di động của bạn có thể rất quan trọng vì hơn một nửa lưu lượng truy cập Internet đến từ điện thoại. Khách hàng có nhiều khả năng ở lại trang web lâu hơn hoặc mua thứ gì đó nếu nó hấp dẫn về mặt hình ảnh. Chế độ xem trên máy tính để bàn cũng có thể giúp bạn thực hiện chỉnh sửa và khắc phục các sự cố có thể xảy ra sớm hơn.

May mắn thay, đây là một quá trình tương đối đơn giản. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách xem phiên bản di động của trang web trên các thiết bị và trình duyệt khác nhau.

1. Cách xem phiên bản di động của trang web trong Chrome trên máy Mac

Trong Chrome, bạn có thể kiểm tra giao diện người dùng và xem liệu tất cả các thành phần của trang web có hoạt động bình thường hay không bằng cách sử dụng công cụ dành cho nhà phát triển tích hợp có tên DevTools. Bởi vì nó cung cấp các lựa chọn thiết bị được xác định trước nên DevTools là cách tốt nhất để nhà phát triển nhanh chóng chuyển chế độ xem từ máy tính để bàn sang thiết bị di động và ngược lại mà không cần bất kỳ tiện ích mở rộng dành cho nhà phát triển nào.

Bạn cũng có thể thay đổi kích thước màn hình để phù hợp với nhu cầu của mình và điều chỉnh chiều rộng và chiều cao màn hình để xem trang web của bạn sẽ trông như thế nào trên các kích thước màn hình khác nhau. Để làm như vậy trên máy Mac, hãy làm theo các bước sau:

• Khởi chạy trình duyệt Google Chrome và truy cập trang web bạn muốn xem.
• Nhấn F12 trên bàn phím để truy cập DevTools.

• Khi chế độ này được bật, hãy nhấp vào biểu tượng "Toggle Device Emulation".

• Bạn có thể chọn từ danh sách các thiết bị iOS và Android để mô phỏng chúng.

• Nó sẽ hiển thị trang web ở dạng di động mà bạn đã chọn.

Khi bạn hoàn tất, chỉ cần đóng cửa sổ công cụ dành cho nhà phát triển để đóng phiên bản di động của trang web.

2. Cách xem phiên bản di động của trang web trong Chrome trên PC Windows

Nếu bạn muốn xem phiên bản di động của một trang web trên PC chạy Windows trong Chrome, thì quy trình này khá tương tự:

• Mở trình duyệt Chrome.
• Trong Chrome, truy cập trang web bạn muốn xem trong phiên bản di động.
• Nhấp chuột phải vào trang web và chọn "Kiểm tra" từ menu.

• Để đi tới Công cụ dành cho nhà phát triển, hãy nhấp vào tab "Công cụ khác" và chọn "Công cụ dành cho nhà phát triển" hoặc nhấn F12 để mở DevTools.

• Cửa sổ Công cụ dành cho nhà phát triển sẽ mở ra.
• Nhấp vào Biểu tượng chuyển đổi thiết bị để chuyển sang Chế độ xem trang web trên thiết bị di động.

• Chọn thiết bị di động bạn muốn mô phỏng (tùy chọn).

Bây giờ bạn có thể sửa đổi kích thước của màn hình cho phù hợp với nhu cầu của mình.

3. Cách xem phiên bản di động của trang web trong Chrome trên Chromebook

Truy cập phiên bản di động của trang web trong Chrome bằng Chromebook rất giống với hai phương pháp đầu tiên.

• Mở trình duyệt web Google Chrome.
• Mở trang web bạn muốn truy cập trên thiết bị di động của mình.
• Để truy cập menu, nhấp vào biểu tượng ba chấm dọc.

• Kéo chuột qua mục Công cụ khác trong danh sách.

• Chọn "Công cụ dành cho nhà phát triển".

• Cửa sổ Công cụ dành cho nhà phát triển trong trình duyệt sẽ mở ra.
• Chuyển đổi chế độ xem trang web dành cho thiết bị di động bằng cách nhấp vào biểu tượng chuyển đổi Thiết bị.

Thao tác này sẽ hiển thị giao diện người dùng cho trang web dành cho thiết bị di động. Bạn cũng có thể chọn trải nghiệm thiết bị ưa thích bằng cách chọn nhãn hiệu và kiểu máy từ hộp thả xuống. Trang web sẽ làm mới dưới dạng trang web dành cho máy tính để bàn bất cứ khi nào bạn đóng bảng điều khiển công cụ dành cho nhà phát triển.

4. Cách xem phiên bản di động của trang web trong Firefox trên máy Mac

Bạn có thể sử dụng các trình duyệt web khác như Firefox để xem trang web dành cho thiết bị di động trên máy tính để bàn Mac. Thay đổi kích thước cửa sổ trình duyệt là một trong những phương pháp được hầu hết các nhà phát triển web sử dụng để đánh giá trang web có thiết kế đáp ứng. Tuy nhiên, hầu hết mọi lúc, giải pháp thay thế này dường như không được chấp nhận.

Đó là lúc khả năng phát triển web của trình duyệt Firefox phát huy tác dụng. Bạn có thể duyệt các trang web của mình ở nhiều độ phân giải nếu bạn biết cách truy cập các phiên bản trang web dành cho thiết bị di động trong Firefox. Thực hiện theo các bước sau:

• Mở phiên bản di động của trang web bạn muốn xem.
• Nhấp chuột phải vào trang web và chọn tùy chọn "Kiểm tra" từ menu.

• Chọn "Chế độ thiết kế đáp ứng".

• Chọn kích thước màn hình của trang web.

5. Cách xem phiên bản di động của trang web trong Firefox trên PC Windows

PC Windows cũng có tùy chọn xem phiên bản di động của trang web bằng Firefox. Đây là cách thực hiện:

• Khởi động Firefox trên PC của bạn.
• Truy cập trang web bạn muốn xem dưới dạng phiên bản di động.
• Đi tới "Cài đặt" bằng cách nhấp vào biểu tượng ba thanh ngang.

• Bạn sẽ thấy menu thả xuống nơi bạn sẽ phải chọn tùy chọn "Nhà phát triển web".

• Chọn "Chế độ thiết kế đáp ứng".

• Cuối cùng, bạn có thể chọn một kiểu điện thoại thông minh để xem trang web của bạn sẽ xuất hiện như thế nào trên thiết bị đó.

6. Cách xem phiên bản di động của trang web trong Safari trên máy Mac

Chúng tôi đã đề cập đến cách xem trang web dành cho thiết bị di động trên máy tính để bàn bằng Chrome và Firefox. Nhưng còn trình duyệt mặc định đi kèm với thiết bị Mac, Safari thì sao? May mắn thay, bạn cũng có thể xem phiên bản di động của một trang web trong Safari.

• Khởi chạy trình duyệt Safari.
• Truy cập trang web bạn muốn xem dưới dạng phiên bản di động.
• Nhấp vào "Tùy chọn" và sau đó vào menu "Phát triển".

• Từ menu thả xuống, chọn "Nhập Chế độ thiết kế đáp ứng".

• Bây giờ bạn có thể xem phiên bản di động của trang web.

7. Câu hỏi thường gặp bổ sung

7.1. Tôi có thể xem phiên bản máy tính để bàn của trang web trên điện thoại của mình không?

Câu trả lời là có! Bạn có thể chuyển từ phiên bản di động sang phiên bản máy tính để bàn để kiểm tra mà không cần sử dụng máy tính. Các bước để chuyển phiên bản di động sang phiên bản máy tính để bàn trong Chrome như sau:

• Truy cập trang web bạn muốn xem ở chế độ xem trên máy tính để bàn.
• Nhấn vào biểu tượng ba chấm để truy cập menu.
• Chọn tùy chọn "Chế độ xem trên màn hình" ngay bây giờ.

Hãy nhớ rằng các bước này có thể khác nhau tùy thuộc vào điện thoại bạn đang sử dụng.

7.2. Làm cho thiết kế web di động dễ dàng hơn

Các công cụ dành cho nhà phát triển rất hữu ích để phân tích và sửa đổi phiên bản di động của trang web trên máy tính để bàn mà không cần chuyển đổi thiết bị. Bạn có thể thay đổi kích thước màn hình để quan sát cách các thành phần hoạt động trên các thiết bị khác nhau. Bạn có thể điều chỉnh các thành phần khác nhau và tạo trang web cho nhiều kích thước màn hình bằng chế độ đáp ứng.

Khi thiết kế một trang web, nhà thiết kế phải luôn ghi nhớ cách giao diện người dùng của trang web xuất hiện trên điện thoại, máy tính bảng và máy tính để bàn. Việc sử dụng các phương pháp được mô tả trong bài viết cũng có thể giúp nhà phát triển thực hiện điều đó và cũng có thể xác định thành phần nào của trang web đang tạo ra sự cố để khắc phục chúng.

Bạn đã bao giờ thử xem phiên bản di động của một trang web trên máy tính để bàn của mình chưa? Bạn thích sử dụng trình duyệt nào để làm như vậy? Cho chúng tôi biết trong phần ý kiến dưới đây.