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 hiển thị không 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à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à 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 có chiều rộng là 320 pixel. Trừ khi được quy định rõ ràng khác, iPhone giả định rằng mọi trang web bạn truy cập đều là trang web trên 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 đủ.
bộ sạc của tôi sẽ không sạc được iphone của tôi
Nhưng iPhone 5 chỉ rộng 320 pixel. Đó không phải luôn là kích thước của khung nhìn sao?
Không, không phải vậy. 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ỉ nhìn thấy 320 pixel của trang hay họ đang nhìn thấy 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 tới 980 pixel. Do đó, chế độ xem 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ì 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ỉ thấy một phần nhỏ của nó.
tmobile không có dịch vụ iphone 6
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 theo chiều rộng của chính nó (320px trong trường hợp là iPhone 5) và không mở rộng (hoặc thu phóng) trang.
Để 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 khắc phục 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 chủ đề 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.
thông báo iphone 7 không hoạt động
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 rất 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.