Computer >> Hướng Dẫn Máy Tính >  >> Hệ Thống >> Mac

Sử dụng Chế độ Thiết kế Đáp ứng của Safari để Xem trước Trang web trên Mọi Thiết bị

Ngày càng nhiều nhà thiết kế web xây dựng các trang web để trở nên "đáp ứng" (responsive) — tức là chúng sẽ tự điều chỉnh để hiển thị nội dung theo định dạng phù hợp nhất với bất kỳ thiết bị nào bạn đang dùng để duyệt web. Ví dụ, nếu bạn truy cập Macgasm trên iPhone, văn bản tiêu đề và hình ảnh trên trang chủ sẽ tự động thay đổi kích thước thành kích thước thân thiện với thiết bị di động hơn. Nếu bạn đang xây dựng một trang web và muốn xem nó trông như thế nào trên các kích thước màn hình khác nhau, thì Chế độ Thiết kế Đáp ứng mới của Safari chính là công cụ dành cho bạn.

Cách kích hoạt Chế độ Thiết kế Đáp ứng

Để sử dụng tính năng này, bạn cần chạy OS X El Capitan và cần bật menu Develop (Phát triển) của Safari nếu chưa làm. Cách thực hiện: vào Safari > Preferences (Tùy chọn), nhấp vào Advanced (Nâng cao), sau đó tích vào ô "Show Develop menu in menu bar" (Hiển thị menu Develop trên thanh menu).

Sử dụng Chế độ Thiết kế Đáp ứng của Safari để Xem trước Trang web trên Mọi Thiết bị
Một trang bài viết Macgasm được xem trong chế độ thiết kế đáp ứng.

Truy cập trang web bạn đang làm việc, sau đó vào Develop > Enter Responsive Design Mode (Vào Chế độ Thiết kế Đáp ứng). Ngay lập tức, bạn sẽ thấy trang của mình trông như thế nào trên nhiều thiết bị iOS khác nhau, cũng như các độ phân giải màn hình phổ biến khác. Bạn có thể thay đổi kích thước khu vực hiển thị bằng cách di chuột qua cạnh trang web và kéo sang trái hoặc phải. Chuyển đổi giữa các khu vực hiển thị khác nhau để xem trang web thay đổi như thế nào từ thiết bị này sang thiết bị khác — bạn có thể sẽ phát hiện ra một lỗi mà trước đó không nhận ra.

Khi hoàn tất, vào Develop > Exit Responsive Design Mode (Thoát Chế độ Thiết kế Đáp ứng).