Mój przyjaciel niedawno skontaktował się ze mną, aby poprosić o pomoc w związku z witryną WordPress, którą zbudował przy użyciu motywu X. Jego klient zadzwonił do niego tego ranka, gdy zauważył, że jego witryna internetowa nie wyświetla się poprawnie na jego iPhonie. Nick sam to sprawdził i rzeczywiście, piękny, responsywny projekt, który zaprojektował, już nie działał.
Był jeszcze bardziej zdumiony faktem, że kiedy zmienił rozmiar okna przeglądarki na pulpicie, strona był responsywny, ale na jego iPhonie była wyświetlana tylko wersja na komputery stacjonarne. Dlaczego witryna miałaby być responsywny na komputerze stacjonarnym i nie reaguje na urządzeniu mobilnym?
Dlaczego projektowanie responsywne nie działa
Projekt responsywny przestaje działać, gdy brakuje jednej linii kodu w nagłówku pliku HTML. Jeśli brakuje tej pojedynczej linii kodu, Twój iPhone, Android i inne urządzenia przenośne przyjmą, że przeglądana witryna jest pełnowymiarową witryną na komputery i dostosują rozmiar rzutnia aby objąć cały ekran.
Co rozumiesz przez rzutnię i rozmiar rzutni?
Na wszystkich urządzeniach rozmiar widoku 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 określono inaczej, iPhone'y zakładają, że każda odwiedzana witryna jest witryną komputerową o szerokości 980 pikseli.
Teraz, używając wyimaginowanego iPhone'a 5,odwiedzasz witrynę zaprojektowaną dla komputerów stacjonarnych o szerokości 800 pikseli. Nie ma układu responsywnego, więc Twój iPhone wyświetla wersję komputerową o pełnej szerokości.
Wiadomości z iPhone'a się nie wyświetlają
Ale iPhone 5 ma tylko 320 pikseli szerokości. Czy to nie zawsze jest rozmiar widocznego obszaru?
Nie, nie jest. Z rozmiarem rzutni, w grę może wchodzić skalowanie . IPhone musi oddalić się, aby wyświetlić wersję strony internetowej o pełnej szerokości. 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 może widzi wersję o pełnej szerokości?
Zgadza się: widzą stronę internetową o pełnej szerokości na ekranie, ponieważ iPhone przyjął domyślne zachowanie: jest zmniejszony, aby użytkownik mógł wyświetlić stronę internetową o szerokości do 980 pikseli. W związku z tym obszar roboczy iPhone'a ma rozmiar 980 pikseli.
W miarę powiększania lub zmniejszania rozmiar rzutni zmienia się. Wcześniej powiedzieliśmy, że nasza wyimaginowana witryna ma szerokość 800 pikseli, więc gdyby powiększyć iPhone'a tak, aby krawędzie witryny dotykały krawędzi ekranu iPhone'a, widoczny obszar miałby 800 pikseli. Iphone mogą mieć widoczny obszar 320 pikseli w witrynie na komputery, ale jeśli tak, to zobaczysz tylko niewielką jego część.
jak wyszukiwać iphone'a 5
Moja responsywna witryna internetowa jest zepsuta. Jak to naprawić?
Odpowiedzią jest pojedynczy wiersz kodu HTML, który po wstawieniu do nagłówka strony internetowej informuje urządzenie, aby ustawiło okno robocze na własną szerokość (320 pikseli w przypadku iPhone'a 5), a nie skalowało (ani nie powiększało) strony.
Aby uzyskać bardziej techniczne omówienie wszystkich opcji związanych z tym metatagiem, sprawdź ten artykuł na tutsplus.com .
Jak naprawić motyw WordPress X, gdy nie jest responsywny
Wracając do mojego przyjaciela z przeszłości: ta jedna linia kodu zniknęła, gdy zaktualizował motyw X. Naprawiają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.
telefon samodzielnie dzwoni
Ponieważ Nick używa stosu Ethos motywu 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, zamień nazwę swojego stosu (Integralność, Odnowienie itp.) Na „ethos”, aby znaleźć właściwy plik nagłówkowy. Wstaw tę jedną linię i voila! Jesteś gotowy.
Więc to również naprawia moje zapytania o media CSS?
Kiedy wstawisz ten wiersz w nagłówku pliku HTML, Twoje responsywne zapytania @media zaczną nagle znowu działać, a mobilna wersja Twojej witryny ożyje. Dziękuję za przeczytanie i mam nadzieję, że to pomoże!
Pamiętaj, aby Payette Forward,
David P.