Trang web đáp ứng của tôi không hoạt động. Cách khắc phục: Viewport.

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 đã xây dựng 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 tuyệt đẹp mà anh ấy thiết kế đã không còn hoạt động nữa.

Anh ấy càng thêm bối rối bởi thực tế là khi anh ấy thay đổi kích thước cửa sổ trình duyệt trên màn hình của mình, trang web đã phản hồi nhanh, 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ẽ là đáp ứng trên máy tính để bànkhô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à trang web trên máy tính để bàn có kích thước đầy đủ và điều chỉnh kích thước của khung nhìn để bao phủ toàn bộ màn hình.

Bạn có ý nghĩa gì theo khung nhìn và kích thước khung nhìn?

Trên tất cả các thiết bị, kích thước của chế độ xem đề 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 với chiều rộng 320 pixel. Trừ khi được nói rõ ràng bằng cách khác, iPhone giả định rằng mọi trang web bạn truy cập đều là trang dành cho máy tính để bàn có chiều rộng 980px.

Bây giờ, bằng cách 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 có chiều 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 máy tính để bàn có chiều rộng đầy đủ.

Nhưng iPhone 5 chỉ rộng 320 pixel. Đó không phải là luôn luôn là kích thước của khung nhìn?

Không, không phải đâu. Với kích thước khung nhìn, mở rộng quy mô có thể được tham gia. IPhone phải thu nhỏ để xem phiên bản toàn chiều rộng của trang web. Hãy nhớ rằng khung nhìn đề 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ỉ thấy 320 pixel của trang hay họ đang xem phiên bản toàn chiều rộng?

Đú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: Nó được thu nhỏ để người dùng có thể xem một trang web có chiều rộng lên đến 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 là 800px, vì vậy nếu bạn phóng to iPhone của mình để các cạnh của trang web chạm vào các cạnh của màn hình iPhone của bạn, thì khung nhìn 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ỉ thấy một phần nhỏ của nó.

Trang web đáp ứng của tôi bị hỏng. Làm thế nào để tôi sửa nó?

Câu trả lời là một dòng HTML duy nhất khi được chèn vào tiêu đề của trang web sẽ yêu cầu thiết bị đặt chế độ xem thành chiều rộng của chính nó (320px trong trường hợp iPhone 5) và không mở rộng (hoặc thu phóng) trang.

<meta name="viewport" content="width=device-width">

Để có một cuộc 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 sửa chủ đề WordPress X khi nó không phản hồi

Quay lại với người bạn của tôi trước đây: 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 đề – nó 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 chủ đề của mình.

Vì Nick sử dụng ngăn xếp Ethos của chủ đề X, anh ấy phải thêm dòng mã mà tôi đã đề cập trước đây 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 thế tên của ngăn xếp của bạn (Toàn vẹn, Gia hạn, v.v.) cho ‘đặc điểm’ để tìm tệp tiêu đề chính xác. Chèn một dòng đó, và thì đấy! Bạn tốt để đi.

Vì vậy, điều này cũng sửa chữ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ẽ đột nhiên 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 vì đã đọc và tôi hy vọng nó sẽ hữu ích!

Hãy nhớ Payette Forward,
David P.

[elementor-template id=”4416″]

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *