Firefox là một trong số những phần mềm duyệt web phổ biến nhất hiện nay. Nếu bạn thường xuyên sử dụng Firefox thì bài viết này mình sẽ hướng dẫn cho bạn cách thêm preset để làm responsive cho trang web trên Firefox.
Preset ở đây là các kích thước về độ rộng của màn hình. Bạn hoàn toàn có thể thêm bằng tay hoặc kéo tùy chỉnh độ rộng của màn hình kiểm tra responsive. Trong quá trình sử dụng thì bạn sẽ có danh sách các loại màn hình cần thiết để làm responsive cho website, bạn lưu lại các thông số này, lần sau bạn cài lại Firefox thì chỉ cần nhập vào nhằm tiết kiệm thời gian.
Đầu tiên thì bạn phải có phần mềm Firefox trước, nếu bạn chưa sử dụng Firefox bao giờ thì bạn có thể tải trực tiếp trên website của họ bằng cách lấy đường dẫn từ trang chủ. Bạn cũng có thể truy cập trang Browse Happy để biết thêm thông tin về top 5 trình duyệt web tốt nhất hiện nay. Ngoài ra bạn cũng có thể xem thêm thông tin trong bài viết nâng cấp trình duyệt web trên blog Học WordPress.
Sau khi đã có trình duyệt Firefox thì bạn mở phần mềm này lên, gõ vào thanh địa chỉ about:config. Nếu nó xuất hiện lên thông báo gì đó thì bạn cứ nhấn tiếp tục để vào bên trong. Bạn gõ vào ô tìm kiếm với từ khóa là preset. Bạn sẽ thấy được 2 dòng đó là: devtools.responsiveUI.currentPreset và devtools.responsiveUI.presets. Ở đây bạn chỉ quan tâm đến dòng devtools.responsiveUI.presets. Nếu như bạn tìm kiếm mà không có dòng devtools.responsiveUI.presets thì bạn chỉ việc nhấn chuột phải và tạo mới với kiểu dữ liệu là string nhé.
Bạn nhấp đôi chuột vào dòng devtools.responsiveUI.presets, một hộp thoại sẽ xuất hiện cho phép bạn nhập các kích thước màn hình, bạn chỉ cần sao chép nguyên đoạn bên dưới và bỏ vào, sau đó nhấn OK để lưu lại.
[{"key":"320x590","width":320,"height":590},{"key":"330x590","name":"","width":330,"height":590},{"key":"338x590","name":"","width":338,"height":590},{"key":"360x590","name":"","width":360,"height":590},{"key":"480x590","name":"","width":480,"height":590},{"key":"534x590","name":"","width":534,"height":590},{"key":"549x590","name":"","width":549,"height":590},{"key":"563x590","name":"","width":563,"height":590},{"key":"568x590","name":"","width":568,"height":590},{"key":"600x590","name":"","width":600,"height":590},{"key":"640x590","name":"","width":640,"height":590},{"key":"720x590","name":"","width":720,"height":590},{"key":"768x590","name":"","width":768,"height":590},{"key":"800x590","name":"","width":800,"height":590},{"key":"980x590","name":"","width":980,"height":590},{"key":"1024x590","name":"","width":1024,"height":590}]
Tuy nhiên, sau khi bạn lưu lại thì hệ thống vẫn chưa có hiệu lực ngay, bạn cần phải khởi động lại Firefox mới có thể thấy được những thay đổi. Bây giờ bạn vào công cụ kiểm tra responsive cho website trên Firefox bằng cách nhấn tổ hợp phím Ctrl + Shift + M. Trong này bây giờ bạn sẽ thấy được những thông số kích thước màn hình bạn vừa cài đặt. Chúc bạn thành công.
