# 044: Chỉnh sửa đáp ứng trên Trình giả lập thực - Thủ thuật CSS

Anonim

Việc kéo trình duyệt trên máy tính để bàn xuống rất hẹp có thể cho bạn cảm giác mơ hồ về cách hoạt động của thiết kế đáp ứng, nhưng nó không phải là sự thể hiện chính xác của một thiết bị màn hình nhỏ thực tế. Và những thiết bị màn hình nhỏ thực tế là thứ chúng tôi đang thiết kế ở đây, chứ không phải những nhà thiết kế tò mò khác bóp chết trình duyệt của họ =).

Trong video màn hình này, chúng tôi mở trình mô phỏng iOS (miễn phí với XCode trên máy Mac) và thực hiện một số chỉnh sửa thiết kế dựa trên những gì chúng tôi đang thấy ở đó. Theo kinh nghiệm của tôi, trình mô phỏng rất chính xác với những gì bạn thấy trên thiết bị thực. Tôi cũng đã thấy sự khác biệt - ví dụ như sử dụng bộ nhớ. Ngay sau khi khởi chạy chính trang web này, tôi đã thấy sự cố trên webkit di động - và điều đó không xảy ra trong trình mô phỏng.

Một điều chúng tôi làm là loại bỏ hiệu ứng giấy xếp chồng 3D ở truy vấn phương tiện hẹp nhất. Chúng tôi cũng phát hiện ra rằng quảng cáo trong tiêu đề đang gây ra một số cuộn ngang trên thiết bị di động, một điều không mong muốn trong cách chúng tôi tiếp cận bố cục trên thiết bị di động. May mắn thay, chúng tôi có thể theo dõi điều đó ngay lập tức, nhưng đôi khi những thứ này khó theo dõi và bạn chỉ cần giấu overflow-xtrên cơ thể, điều mà cuối cùng chúng tôi thực hiện ở đây.

Chúng tôi cũng điều chỉnh một số kích thước phông chữ cho màn hình nhỏ hơn.