Mój przyjaciel niedawno skontaktował się ze mną, prosząc o pomoc przy witrynie WordPress, którą zbudował przy użyciu motywu X. Jego klient zadzwonił do niego tego ranka po tym, jak zauważył, że jego strona internetowa nie wyświetla się poprawnie na jego iPhonie. Nick sam to sprawdził i rzeczywiście, zaprojektowany przez niego piękny responsywny projekt już nie działał.
Był zdumiony faktem, że kiedy zmienił rozmiar okna przeglądarki na komputerze, witryna była responsywna, ale na iPhonie wyświetlała się tylko wersja na komputer. Dlaczego witryna miałaby być responsywna na komputerze stacjonarnym i nieresponsywna na urządzeniu mobilnym?
Dlaczego responsywny projekt nie działa
Responsywny projekt przestaje działać, gdy w nagłówku pliku HTML brakuje jednego wiersza kodu. Jeśli brakuje tego pojedynczego wiersza kodu, telefon iPhone, urządzenie z systemem Android i inne urządzenia przenośne założą, że przeglądana witryna jest pełnowymiarową witryną na komputery i dostosują rozmiar viewport , aby objąć cały ekran.
Co rozumiesz przez rzutnię i rozmiar rzutni?
Na wszystkich urządzeniach rozmiar widocznego obszaru odnosi się do rozmiaru obszaru strony internetowej, który jest aktualnie widoczny dla użytkownika. Wyobraź sobie, że trzymasz iPhone'a 5 o szerokości 320 pikseli. O ile wyraźnie nie zaznaczono inaczej, iPhone'y zakładają, że każda odwiedzana witryna internetowa jest witryną komputerową o szerokości 980 pikseli.
Teraz, korzystając z wyimaginowanego iPhone'a 5, odwiedzasz witrynę internetową o szerokości 800 pikseli przeznaczoną na komputery. Nie ma responsywnego układu, więc Twój iPhone wyświetla wersję komputerową o pełnej szerokości.
Nie, nie jest. Skalowanie może być związane z rozmiarem widocznego obszaru. Aby wyświetlić stronę internetową w pełnej szerokości, iPhone musi ją pomniejszyć. Pamiętaj, że rzutnia odnosi się do obszaru strony, który jest aktualnie widoczny dla użytkownika. Czy użytkownik iPhone'a widzi obecnie tylko 320 pikseli strony, czy też wersję o pełnej szerokości?
Zgadza się: widzą stronę internetową o pełnej szerokości na swoim wyświetlaczu, ponieważ iPhone przyjął domyślne zachowanie: jest pomniejszony, aby użytkownik mógł wyświetlić stronę internetową o szerokości do 980 pikseli. W związku z tym rzutnia iPhone'a to 980 pikseli.
Podczas powiększania lub pomniejszania zmienia się rozmiar widocznego obszaru. Powiedzieliśmy wcześniej, że nasza wyimaginowana witryna ma szerokość 800 pikseli, więc jeśli powiększysz iPhone'a tak, aby krawędzie witryny dotykały krawędzi wyświetlacza Twojego iPhone'a, widoczny obszar wyniesie 800 pikseli. IPhone może mieć rzutnię o rozdzielczości 320 pikseli w witrynie na komputery, ale gdyby tak było, widziałbyś tylko niewielką jej część.
Moja responsywna witryna nie działa. Jak to naprawić?
Odpowiedź to pojedyncza linia kodu HTML, która po wstawieniu do nagłówka strony internetowej mówi urządzeniu, aby ustawiło widok na własną szerokość (320 pikseli w przypadku iPhone'a 5) i nie skalowało (lub powiększ) stronę.
Bardziej techniczne omówienie wszystkich opcji związanych z tym metatagiem można znaleźć w tym artykule na stronie tutsplus.com.
Jak naprawić motyw WordPress X, gdy nie odpowiada
Powrót do mojego znajomego z przeszłości: Ten jeden wiersz kodu zniknął, gdy zaktualizował motyw X. Poprawiając swój, pamiętaj, że motyw X nie używa tylko jednego pliku nagłówkowego — używa różnych plików nagłówkowych dla każdego stosu, więc będziesz musiał edytować swój.
Ponieważ Nick używa motywu Ethos stack of X, musiał dodać wiersz kodu, o którym wspomniałem wcześniej, do pliku nagłówkowego, który znajdował się w x /frameworks/views/ethos/wp-header.php . Jeśli używasz innego stosu, zastąp nazwę swojego stosu (Integralność, Odnów itp.) zamiast „ethos”, aby znaleźć właściwy plik nagłówkowy. Wstaw tę jedną linijkę i voila! Możesz już iść.
Czy to też naprawia moje zapytania o media CSS?
Gdy wstawisz ten wiersz w nagłówku pliku HTML, Twoje responsywne zapytania @media nagle zaczną znowu działać, a mobilna wersja Twojej witryny zacznie działać. Dziękuję za przeczytanie i mam nadzieję, że to pomoże!
Pamiętaj o Payette Forward, David P.
