Trải Nghiệm Chế Độ Duyệt Web Mobile Trên Máy Tính

Trang Chủ / Máy Tính / Trải Nghiệm Chế Độ Duyệt Web Mobile Trên Máy Tính

Trong thời đại số hóa hiện nay, việc duyệt web không chỉ giới hạn trên điện thoại thông minh mà còn mở rộng sang máy tính cá nhân. Bài viết này từ maytinhgiaphat.vn sẽ hướng dẫn bạn cách dễ dàng trải nghiệm chế độ duyệt web mobile trên máy tính của mình, mang lại nhiều lợi ích bất ngờ từ việc tiết kiệm dữ liệu đến hỗ trợ kiểm thử giao diện. Đặc biệt, đây là giải pháp lý tưởng cho những ai muốn khám phá giao diện di động mà không cần sở hữu smartphone hoặc phục vụ mục đích kiểm thử và phát triển web.

Phương pháp này dựa trên việc thay đổi “User Agent” – một chuỗi ký tự mà trình duyệt gửi đến máy chủ web để nhận diện chính nó. Khi bạn thay đổi User Agent thành một thiết bị di động, trang web sẽ tự động hiển thị phiên bản tối ưu cho di động, cung cấp trải nghiệm gọn gàng, nhanh chóng và đôi khi là riêng biệt so với phiên bản máy tính để bàn. Việc này không chỉ giúp bạn cảm nhận được sự khác biệt về trải nghiệm người dùng mà còn là một công cụ hữu ích cho các nhà phát triển web và những người làm SEO.

Table of Contents

Hiểu về User Agent và Lợi Ích Của Việc Mô Phỏng

Trước khi đi sâu vào các bước cụ thể, điều quan trọng là phải hiểu về User Agent – một chuỗi thông tin mà trình duyệt của bạn gửi đến máy chủ của trang web bạn đang truy cập. Chuỗi này giúp máy chủ xác định loại trình duyệt, hệ điều hành và thiết bị bạn đang sử dụng. Từ đó, trang web có thể điều chỉnh cách hiển thị nội dung để phù hợp nhất với thiết bị của bạn, ví dụ như tải giao diện mobile cho điện thoại hoặc giao diện desktop cho máy tính.

Việc mô phỏng chế độ duyệt web di động trên máy tính mang lại nhiều lợi ích thiết thực. Đầu tiên, nó giúp các nhà phát triển web dễ dàng kiểm tra tính tương thích và phản hồi của giao diện website trên các thiết bị di động khác nhau mà không cần nhiều thiết bị vật lý. Thứ hai, đối với người dùng thông thường, việc chuyển sang chế độ di động có thể giúp tiết kiệm băng thông và tải trang nhanh hơn, đặc biệt hữu ích khi truy cập các trang tin tức hoặc mạng xã hội. Hơn nữa, bạn có thể dễ dàng kiểm tra các tính năng chỉ có trên phiên bản di động, chẳng hạn như khi cập nhật trạng thái trên Facebook sẽ hiển thị “via mobile”. Đây là một kỹ năng hữu ích, giúp tối ưu hóa trải nghiệm lướt web và nâng cao khả năng làm việc với các công cụ phát triển.

Trải Nghiệm Chế Độ Duyệt Web Mobile Với Google Chrome

Google Chrome, với công cụ Developer Tools mạnh mẽ, cung cấp một cách trực quan và dễ dàng để mô phỏng chế độ duyệt web di động. Tính năng này được tích hợp sẵn, giúp người dùng và nhà phát triển kiểm tra website trên nhiều kích thước màn hình và thiết bị khác nhau.

Kích hoạt Chế độ Nhà phát triển và Cài đặt User Agent

Để bắt đầu trải nghiệm chế độ duyệt web mobile trên máy tính với Chrome, bạn cần kích hoạt công cụ dành cho nhà phát triển.

Xem Thêm Bài Viết:

Bạn nhấn vào biểu tượng ba chấm dọc (Customize and control Google Chrome) ở góc trên bên phải thanh địa chỉ. Sau đó, di chuyển chuột đến mục More tools và chọn Developer tools (hoặc sử dụng phím tắt tiện lợi Ctrl + Shift + I hoặc F12). Một bảng điều khiển sẽ xuất hiện ở phía dưới hoặc bên cạnh trình duyệt.

Mở Developer Tools trong Google Chrome để trải nghiệm chế độ duyệt web mobile trên máy tính

Trong giao diện Developer tools, bạn sẽ thấy một biểu tượng nhỏ hình điện thoại và máy tính bảng (Toggle device toolbar) ở góc trên bên trái của bảng điều khiển. Nhấn vào biểu tượng này để kích hoạt chế độ mô phỏng thiết bị di động.

Kích hoạt chế độ mô phỏng thiết bị trong Developer Tools Chrome

Khi chế độ mô phỏng được bật, bạn có thể chọn loại thiết bị muốn mô phỏng (ví dụ: iPhone X, Galaxy S5, iPad…) từ menu thả xuống ở phía trên cùng của giao diện trang web. Đồng thời, bạn cũng có thể tùy chỉnh độ phân giải màn hình hoặc xoay màn hình (portrait/landscape) để phù hợp với nhu cầu kiểm thử. Tính năng “Responsive” cho phép bạn tự do kéo thả để thay đổi kích thước màn hình, giúp kiểm tra giao diện phản hồi trên mọi kích thước.

Tùy chỉnh thiết bị và kích thước màn hình để trải nghiệm chế độ duyệt web mobile trên máy tính

Sau khi đã chọn thiết bị và kích thước phù hợp, chỉ cần tải lại trang web (nhấn F5 hoặc nút Refresh), trang web sẽ tự động hiển thị ở chế độ mobile tương ứng. Điều này cực kỳ hữu ích cho các nhà phát triển web muốn đảm bảo trải nghiệm người dùng trên di động là hoàn hảo trước khi triển khai. Lưu ý rằng thiết lập này chỉ có hiệu lực với tab hiện tại mà bạn đang thao tác.

Trải Nghiệm Chế Độ Duyệt Web Mobile Với Firefox

Firefox cũng cung cấp khả năng mô phỏng trải nghiệm chế độ duyệt web mobile trên máy tính thông qua việc thay đổi User Agent, tuy nhiên, cách thực hiện có phần khác biệt và mang tính kỹ thuật hơn một chút so với Chrome. Phương pháp này yêu cầu người dùng truy cập vào cài đặt nâng cao của trình duyệt.

Cấu hình Nâng Cao và Thay Đổi User Agent String

Để bắt đầu, bạn cần truy cập vào trang cấu hình nâng cao của Firefox bằng cách gõ about:config vào thanh địa chỉ của trình duyệt và nhấn Enter. Một cảnh báo có thể xuất hiện, hãy chọn I’ll be careful, I promise! (hoặc Accept the Risk and Continue tùy phiên bản) để tiếp tục.

Truy cập about:config trong Firefox để thay đổi User Agent

Trong thanh tìm kiếm (Search) ở phía trên cùng của trang about:config, nhập useragent. Nếu không thấy mục general.useragent.override, bạn cần tạo một mục mới. Nhấn chuột phải vào bất kỳ khoảng trống nào trong danh sách, chọn New, sau đó chọn String.

Tạo String mới cho User Agent trong FirefoxTạo String mới cho User Agent trong Firefox tiếp theo

Một cửa sổ nhỏ sẽ hiện ra yêu cầu nhập tên tùy chọn (Enter the preference name). Nhập general.useragent.override vào trường này và nhấn OK.

Nhập tên preference general.useragent.override

Tiếp theo, một cửa sổ khác sẽ yêu cầu nhập giá trị (Enter the string value). Đây chính là nơi bạn nhập chuỗi User Agent của thiết bị di động mà bạn muốn mô phỏng. Ví dụ, bạn có thể tìm kiếm “iOS User Agent String” hoặc “Android User Agent String” trên internet để có các chuỗi chính xác. Sau khi nhập, nhấn OK.

Nhập chuỗi User Agent cho thiết bị di động vào Firefox

Các Mã User Agent Thường Dùng

Để giúp bạn dễ dàng trải nghiệm chế độ duyệt web mobile trên máy tính, dưới đây là một số ví dụ về chuỗi User Agent phổ biến cho các thiết bị di động khác nhau. Bạn có thể sao chép và sử dụng chúng trong bước cấu hình trên Firefox hoặc Internet Explorer:

iPhone:Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
iPad:Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
BlackBerry 10:Mozilla/5.0 (BB10; ) AppleWebKit/ (KHTML, like Gecko) Version/ Mobile Safari/
Google Nexus:Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
HTC:Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
Motorola:Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Samsung:Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Sony:Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; E10i Build/2.0.2.A.0.24) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Sau khi hoàn tất thiết lập, trình duyệt Firefox của bạn sẽ hoạt động ở chế độ tương ứng với User Agent đã nhập trên mọi tab. Đây là một phương pháp hữu ích để kiểm tra các trang web hoặc đơn giản là để trải nghiệm giao diện di động một cách nhất quán.

Trải Nghiệm Chế Độ Duyệt Web Mobile Với Internet Explorer

Đối với người dùng trình duyệt Internet Explorer (IE), việc mô phỏng trải nghiệm chế độ duyệt web mobile trên máy tính cũng có thể được thực hiện thông qua công cụ phát triển tích hợp. Mặc dù IE không còn được hỗ trợ rộng rãi như trước, nhưng với những hệ thống cũ hoặc nhu cầu kiểm thử đặc thù, việc biết cách điều chỉnh User Agent trên trình duyệt này vẫn hữu ích.

Sử Dụng F12 Developer Tools và Custom User Agent

Để truy cập công cụ phát triển của Internet Explorer, bạn nhấn phím F12 trên bàn phím. Thao tác này sẽ mở khung công cụ Developer Tools ở phía dưới trình duyệt của bạn.

Mở F12 Developer Tools trong Internet Explorer

Trong khung làm việc của Developer Tools, tìm đến tab Emulation. Tại đây, bạn sẽ thấy mục User agent string. Trình duyệt cung cấp một danh sách các chuỗi User Agent sẵn có để bạn lựa chọn. Bạn có thể chọn một trong các tùy chọn hiện có để nhanh chóng chuyển đổi chế độ duyệt web.

Chọn User agent string trong Internet Explorer Developer Tools

Nếu danh sách có sẵn không đáp ứng nhu cầu của bạn, hoặc bạn muốn mô phỏng một thiết bị cụ thể không có trong danh sách, bạn có thể chọn tùy chọn Custom. Một cửa sổ mới sẽ xuất hiện, cho phép bạn tùy chỉnh chuỗi User Agent.

Trong ô Friendly Name, bạn có thể đặt một tên bất kỳ để dễ dàng nhận biết (ví dụ: “iPhone Custom” hoặc “Android Tablet”). Sau đó, trong ô User Agent String, bạn nhập mã User Agent tương ứng với thiết bị bạn muốn mô phỏng (tương tự như các mã đã cung cấp cho Firefox). Sau khi nhập xong, nhấn Add và sau đó Set để áp dụng thay đổi.

Thêm chuỗi User Agent tùy chỉnh trong Internet Explorer

Khác với Chrome, các thiết lập User Agent trên Internet Explorer thông qua Developer Tools thường có hiệu lực với mọi tab bạn mở trong quá trình duyệt web, cho đến khi bạn thay đổi lại hoặc đóng trình duyệt.

Cách Hủy Hiệu Lực Của Chế Độ Duyệt Web Đã Thiết Lập

Sau khi đã hoàn tất việc trải nghiệm chế độ duyệt web mobile trên máy tính và muốn trở về chế độ duyệt web thông thường, việc hủy bỏ các thiết lập User Agent là cần thiết. Mỗi trình duyệt có cách hoàn tác riêng, tuy nhiên thao tác đều rất đơn giản.

Với Google Chrome: Để hủy hiệu lực của chế độ duyệt web di động, bạn chỉ cần đóng cửa sổ Developer Tools hoặc nhấn lại biểu tượng Toggle device toolbar (hình điện thoại và máy tính bảng) trong cửa sổ Developer Tools. Sau đó, tải lại trang web (F5) để trở về giao diện mặc định.
Với Firefox: Truy cập lại trang about:config, tìm kiếm mục general.useragent.override. Nhấn chuột phải vào mục này và chọn Reset. Thao tác này sẽ xóa chuỗi User Agent tùy chỉnh bạn đã thêm và đưa Firefox về User Agent mặc định.
Với Internet Explorer: Mở lại Developer Tools (F12), vào tab Emulation và trong phần User agent string, chọn lại tùy chọn Default hoặc Internet Explorer. Nếu bạn đã thêm User Agent tùy chỉnh, bạn có thể chọn mục đó trong danh sách và nhấn Delete để loại bỏ nó hoàn toàn.

Việc nắm vững cách chuyển đổi và hoàn tác chế độ duyệt web di động trên máy tính không chỉ giúp bạn khám phá các giao diện web khác nhau mà còn là công cụ đắc lực cho việc kiểm thử và phát triển nội dung số. Để tìm hiểu thêm về các mẹo và thủ thuật máy tính hữu ích khác, hãy truy cập vào maytinhgiaphat.vn.