Bắt đầu từ phiên bản Safari 9 trong OS X El Capitan, Apple đã giới thiệu Chế độ thiết kế đáp ứng. Giao diện này giúp các nhà phát triển web thiết kế trải nghiệm web trên nhiều kích thước, hướng và độ phân giải màn hình khác nhau. Thiết kế đáp ứng giúp các nhà phát triển đảm bảo các trang web và ứng dụng của họ hỗ trợ nhiều thiết bị và nền tảng.
Đây là cách bật Chế độ thiết kế đáp ứng trong trình duyệt web Safari.
Thông tin trong bài viết này áp dụng cho Safari 13 đến Safari 9, bao gồm macOS Catalina đến OS X El Capitan. Chế độ thiết kế đáp ứng không khả dụng trong phiên bản Windows của Safari mà Apple không còn hỗ trợ.
Cách bật Chế độ thiết kế đáp ứng trong Safari
Để bật Chế độ thiết kế đáp ứng của Safari, cùng với các công cụ khác dành cho nhà phát triển Safari:
-
Đi tới Safari và chọn Tùy chọn .
Nhấn phím tắt Command + , (dấu phẩy) để truy cập Preferences một cách nhanh chóng.
-
Trong Tùy chọn hộp thoại, chọn Nâng cao tab.
-
Ở cuối hộp thoại, chọn Hiển thị trình đơn Phát triển trong thanh trình đơn hộp kiểm.
-
Bây giờ bạn sẽ thấy Phát triển trong thanh menu Safari trên cùng.
-
Chọn Phát triển > Vào Chế độ thiết kế đáp ứng trong thanh công cụ Safari.
Nhấn phím tắt Tùy chọn + Lệnh + R để nhanh chóng vào Chế độ thiết kế đáp ứng.
-
Trang web đang hoạt động hiển thị trong Chế độ thiết kế thích ứng. Ở đầu trang, hãy chọn thiết bị iOS hoặc độ phân giải màn hình để xem trang sẽ hiển thị như thế nào.
-
Ngoài ra, hãy xem cách trang web của bạn sẽ hiển thị trên các nền tảng khác nhau bằng cách sử dụng trình đơn thả xuống phía trên các biểu tượng độ phân giải.
Công cụ dành cho nhà phát triển Safari
Ngoài Chế độ thiết kế đáp ứng, menu Safari Develop cung cấp các tùy chọn hữu ích khác.
Mở trang bằng
Mở trang web đang hoạt động trong bất kỳ trình duyệt nào hiện được cài đặt trên Mac.
Tác nhân người dùng
Khi bạn thay đổi Tác nhân người dùng, bạn có thể đánh lừa một trang web nghĩ rằng bạn đang sử dụng một trình duyệt khác.
Hiển thị trình kiểm tra web
Hiển thị tất cả tài nguyên của trang web, bao gồm thông tin CSS và số liệu DOM.
Hiển thị bảng điều khiển lỗi
Hiển thị các lỗi và cảnh báo JavaScript, HTML và XML.
Hiển thị nguồn trang
Cho phép bạn xem mã nguồn của trang web đang hoạt động và tìm kiếm nội dung trang.
Hiển thị tài nguyên trang
Hiển thị tài liệu, tập lệnh, CSS và các tài nguyên khác từ trang hiện tại.
Hiển thị trình chỉnh sửa đoạn mã
Cho phép bạn chỉnh sửa và thực thi các đoạn mã. Tính năng này hữu ích từ góc độ thử nghiệm.
Hiển thị trình tạo tiện ích mở rộng
Giúp bạn tạo tiện ích mở rộng Safari bằng cách đóng gói mã của bạn cho phù hợp và bổ sung siêu dữ liệu.
Bắt đầu ghi dòng thời gian
Cho phép bạn ghi lại các yêu cầu mạng, thực thi JavaScript, kết xuất trang và các sự kiện khác trong Trình kiểm tra WebKit.
Bộ nhớ đệm trống
Xóa tất cả các bộ đệm được lưu trong Safari, không chỉ các tệp bộ đệm chuẩn của trang web.
Tắt bộ nhớ đệm
Khi bộ nhớ đệm bị tắt, tài nguyên được tải xuống từ một trang web mỗi khi yêu cầu truy cập được thực hiện thay vì sử dụng bộ đệm cục bộ.
Cho phép JavaScript từ Trường Tìm kiếm Thông minh
Bị tắt theo mặc định vì lý do bảo mật, tính năng này cho phép bạn nhập URL chứa JavaScript vào thanh địa chỉ Safari.