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. Sự xuất hiệ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àn hình cũng có thể giúp bạn thực hiện các 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.
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 được tích hợp sẵn có tên là DevTools. Bởi vì nó cung cấp các lựa chọn thiết bị được xác định trước, 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 nào dành cho nhà phát triển.
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 của màn hình để xem trang web của bạn 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 của bạn để truy cập DevTools.
- Khi chế độ được bật, hãy nhấp vào biểu tượng Chuyển đổi mô phỏng thiết bị.
- 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.
Cách xem phiên bản di động của trang web trong Chrome trên PC chạy Windows
Nếu bạn muốn xem phiên bản dành cho thiết bị di động của trang web trên Windows PC trong Chrome, thì đó là một quy trình khá tương tự:
- Mở trình duyệt Chrome.
- Trong Chrome, hãy truy cập trang web bạn muốn xem trong phiên bản dành cho thiết bị di động.
- Nhấp chuột phải vào trang web và chọn Kiểm tra từ menu.
- Để chuyển đến 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 Di động.
- Chọn thiết bị di động bạn muốn mô phỏng (tùy chọn).
- Giờ đây, 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.
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, hãy 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 kiểu dáng và sản phẩm từ hộp thả xuống. Trang web sẽ làm mới dưới dạng trang 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.
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 một trang web di động trên máy tính Mac. Thay đổi kích thước cửa sổ trình duyệt là một trong những phương pháp mà hầu hết các nhà phát triển web sử dụng để đánh giá trang web thiết kế đáp ứng. Tuy nhiên, hầu hết thời gian, phương án thay thế này sẽ không được chấp nhận.
Đó là lý do mà khả năng phát triển web của trình duyệt Firefox trở nên hữu ích. 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 di động của các trang web trong Firefox. Làm 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.
Cách xem phiên bản di động của trang web trong Firefox trên PC chạy Windows
PC Windows cũng có tùy chọn để xem các phiên bản di động của các trang web bằng Firefox. Đây là cách làm như vậy:
- 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 dành cho thiết bị 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ị đó.
Cách xem phiên bản di động của trang web trong Safari trên máy Mac
Chúng tôi đã trình bày 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 dành cho thiết bị di động.
- Bấm vào Tùy chọn và sau đó trên 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.
Câu hỏi thường gặp bổ sung
Tôi Có Thể Xem Phiên Bản Trên Máy Tính 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 dành cho thiết bị di động sang phiên bản dành cho máy tính để bàn để xem thử 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:
1. Truy cập trang web bạn muốn xem ở chế độ xem trên máy tính để bàn.
2. Nhấn vào biểu tượng ba chấm để truy cập menu.
3. Chọn tùy chọn Màn hình nền 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.
làm thế nào để chuyển tiếp thư aol tới gmail
Giúp 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 tuyệt vời để 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 cách sử dụ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. 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 làm như vậy 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.