Các thiết bị di động đã chiếm một lượng lớn độc giả, nếu không phải là đa số độc giả trực tuyến cho nhiều trang web, do đó, đảm bảo rằng trang web của bạn sẽ trông và hoạt động đúng trên iPhone hoặc máy tính bảng là rất quan trọng. Có nhiều dịch vụ cung cấp bản xem trước bố cục trên thiết bị di động cho một URL nhất định, nhưng Apple đã giúp các trang web thử nghiệm về tính sẵn sàng cho thiết bị di động dễ dàng hơn nhiều với Safari 9 trong OS X El Capitan. Một tính năng mới có tên Responsive Design Mode có thể nhanh chóng xem trước một trang web trông như thế nào trên nhiều thiết bị của Apple cũng như độ phân giải màn hình di động phổ biến. Đây là cách nó hoạt động.
Điều quan trọng cần nhắc lại là Chế độ thiết kế đáp ứng là một tính năng mới dành riêng cho Safari 9 trong OS X El Capitan, vì vậy bạn sẽ cần chạy ít nhất các phiên bản trình duyệt và hệ điều hành này để truy cập. Nếu máy Mac của bạn đáp ứng yêu cầu này, trước tiên bạn cần bật Chế độ nhà phát triển của Safari. Để làm như vậy, khởi chạy Safari và nhấp vào Safari trong Thanh Menu. Sau đó chọn Tùy chọn> Nâng cao .
Trong tab Nâng cao của cửa sổ Tùy chọn của Safari, hãy chọn hộp có nhãn Menu Hiển thị Phát triển Menu trong Thanh Menu. Như tên của tùy chọn ngụ ý, bạn sẽ thấy menu Menu Develop Develop mới xuất hiện trong thanh Menu Safari ở bên phải Dấu trang.
Tiếp theo, đóng cửa sổ Tùy chọn Safari và điều hướng đến trang web bạn muốn kiểm tra trong Chế độ thiết kế đáp ứng. Khi trang web được tải đầy đủ trong trình duyệt của bạn, hãy sử dụng phím tắt Command-Option-R và bạn sẽ thấy cửa sổ trình duyệt chuyển thành bản xem trước của một trong một số độ phân giải của thiết bị di động (bạn cũng có thể truy cập Chế độ thiết kế đáp ứng bằng cách nhấp vào Phát triển trong Thanh Menu Safari và chọn Enter Chế độ thiết kế đáp ứng ).
Chế độ thiết kế đáp ứng của Safari cho phép bạn xem trước một trang web trông như thế nào trên tất cả các độ phân giải của thiết bị di động của Apple, từ iPhone 4S 3, 5 inch đến iPad Pro 12, 9 inch. Người dùng cũng có tùy chọn chọn độ phân giải Retina 1x 1x, 2x hoặc 3x và thay đổi tác nhân trình duyệt để bắt chước hành vi của hầu hết các trình duyệt phổ biến như Chrome, Firefox và Edge.
Đối với mỗi thiết bị và kích thước màn hình, người dùng có thể nhấp vào biểu tượng thiết bị để thay đổi giữa hướng dọc và hướng ngang hoặc, đối với các thiết bị như iPad Air và iPad Pro hỗ trợ chế độ xem tách, bạn có thể nhấp để xoay giữa các bố cục chế độ xem khác nhau.
Mặc dù Chế độ thiết kế đáp ứng của Safari thiếu một số tùy chọn của các công cụ có sẵn tương tự, nhưng nó được tích hợp trực tiếp vào Safari có thể là một trình tiết kiệm thời gian lớn cho các nhà thiết kế web và là công cụ học tập và kiểm tra tuyệt vời cho chủ sở hữu trang web muốn đảm bảo rằng khách truy cập di động của họ đang có được trải nghiệm tốt nhất bất kể độ phân giải màn hình hoặc kích thước.
Sau khi kiểm tra xong, bạn có thể rời khỏi Chế độ thiết kế đáp ứng bằng cách đóng cửa sổ trình duyệt hoặc tab hoặc nhấn phím tắt Command-Option-R lần nữa.
