Một người bạn của tôi gần đây đã liên hệ với tôi để yêu cầu trợ giúp về trang web WordPress mà anh ấy đã tạo bằng chủ đề X. Khách hàng của anh ấy đã gọi cho anh ấy vào sáng hôm đó sau khi anh ấy nhận thấy rằng trang web của anh ấy không hiển thị chính xác trên iPhone của anh ấy. Nick đã tự mình kiểm tra và chắc chắn rằng thiết kế đáp ứng đẹp mắt do anh ấy thiết kế không còn hoạt động nữa.
Anh ấy còn bối rối hơn khi thực tế là khi anh ấy thay đổi kích thước cửa sổ trình duyệt trên máy tính để bàn, trang web đã phản hồi, nhưng trên iPhone của anh ấy, chỉ có phiên bản dành cho máy tính để bàn được hiển thị. Tại sao một trang web sẽ phản hồi trên máy tính để bàn và không phản hồi trên thiết bị di động?
Tại sao thiết kế đáp ứng không hoạt động
Thiết kế đáp ứng ngừng hoạt động khi thiếu một dòng mã trong tiêu đề của tệp HTML. Nếu thiếu một dòng mã này, iPhone, Android và các thiết bị di động khác của bạn sẽ cho rằng trang web bạn đang xem là một trang web có kích thước đầy đủ dành cho máy tính để bàn và điều chỉnh kích thước của viewportđể bao trùm toàn bộ màn hình.
Bạn có ý nghĩa gì với chế độ xem và kích thước chế độ xem?
Trên tất cả các thiết bị, kích thước của khung nhìn đề cập đến kích thước của khu vực trang web hiện đang hiển thị cho người dùng. Hãy tưởng tượng bạn đang cầm một chiếc iPhone 5 có chiều rộng 320 pixel. Trừ khi có quy định rõ ràng khác, iPhone cho rằng mọi trang web bạn truy cập đều là trang web dành cho máy tính để bàn có chiều rộng 980px.
Bây giờ, sử dụng iPhone 5 tưởng tượng của bạn, bạn truy cập trang web được thiết kế cho máy tính để bàn rộng 800px. Nó không có bố cục đáp ứng, vì vậy iPhone của bạn hiển thị phiên bản dành cho máy tính để bàn có chiều rộng đầy đủ.
Không, không phải đâu. Với kích thước khung nhìn, có thể tham gia vào việc chia tỷ lệ. IPhone phải thu nhỏ để xem phiên bản có chiều rộng đầy đủ của trang web. Hãy nhớ rằng chế độ xem đề cập đến khu vực của trang hiện đang hiển thị cho người dùng. Người dùng iPhone hiện chỉ nhìn thấy 320 pixel của trang hay họ đang nhìn thấy phiên bản có chiều rộng đầy đủ?
Đúng vậy: Họ đang nhìn thấy trang web có chiều rộng đầy đủ trên màn hình của họ vì iPhone đã cho rằng đó là hành vi mặc định: Trang web được thu nhỏ để người dùng có thể xem trang web có chiều rộng tối đa 980 pixel. Do đó, khung nhìn của iPhone là 980px.
Khi bạn phóng to hoặc thu nhỏ, kích thước khung nhìn sẽ thay đổi. Trước đây, chúng tôi đã nói rằng trang web tưởng tượng của chúng tôi có chiều rộng 800px, vì vậy nếu bạn phóng to iPhone của mình sao cho các cạnh của trang web chạm vào các cạnh của màn hình iPhone, thì chế độ xem sẽ là 800px. IPhone có thể có chế độ xem 320px trên trang web dành cho máy tính để bàn, nhưng nếu có, bạn sẽ chỉ nhìn thấy một phần nhỏ của nó.
Trang web phản hồi của tôi bị hỏng. Làm thế nào để tôi sửa chữa nó?
Câu trả lời là một dòng HTML mà khi được chèn vào tiêu đề của trang web sẽ cho thiết bị đặt chế độ xem thành chiều rộng của chính nó (320px trong trường hợp của iPhone 5) và không theo tỷ lệ (hoặc thu phóng) trang.
Để thảo luận kỹ thuật hơn về tất cả các tùy chọn liên quan đến thẻ meta này, hãy xem bài viết này trên tutsplus.com.
Cách khắc phục chủ đề WordPress X khi không phản hồi
Trở lại người bạn trước đây của tôi: Một dòng mã này đã biến mất khi anh ấy cập nhật chủ đề X. Khi sửa lỗi của bạn, hãy nhớ rằng chủ đề X không chỉ sử dụng một tệp tiêu đề – chủ đề này sử dụng các tệp tiêu đề khác nhau cho mỗi ngăn xếp, vì vậy bạn sẽ phải chỉnh sửa tệp tiêu đề của mình.
Vì Nick sử dụng ngăn xếp Ethos của chủ đề X nên anh ấy phải thêm dòng mã mà tôi đã đề cập trước đó vào tệp tiêu đề nằm trong x /frameworks/views/ethos/wp-header.php . Nếu bạn sử dụng một ngăn xếp khác, hãy thay tên ngăn xếp của bạn (Tính toàn vẹn, Gia hạn, v.v.) cho 'đặc tính' để tìm tệp tiêu đề chính xác. Chèn một dòng đó và thì đấy! Bạn đã sẵn sàng để đi.
Vậy Điều này cũng sửa các Truy vấn Phương tiện CSS của tôi?
Khi bạn chèn dòng đó vào tiêu đề của tệp HTML, các truy vấn @media đáp ứng của bạn sẽ bất ngờ bắt đầu hoạt động trở lại và phiên bản di động của trang web của bạn sẽ hoạt động trở lại. Cảm ơn bạn đã đọc và tôi hy vọng nó sẽ hữu ích!
Hãy nhớ đến Payette Forward, David P.
