Ein Freund von mir hat mich kürzlich kontaktiert, um mich um Hilfe bei einer WordPress-Site zu bitten, die er mit dem X-Theme erstellt hat. Sein Kunde hatte ihn an diesem Morgen angerufen, nachdem er festgestellt hatte, dass seine Website auf seinem iPhone nicht richtig angezeigt wurde. Nick hat es selbst überprüft und sicher funktionierte das schöne, ansprechende Design, das er entworfen hatte, nicht mehr.
Er war weiter verwirrt über die Tatsache, dass, als er die Größe seines Browserfensters auf seinem Desktop änderte, die Site war reaktionsschnell, aber auf seinem iPhone wurde nur die Desktop-Version angezeigt. Warum sollte eine Website sein reagiert auf einem Desktop-Computer und auf einem mobilen Gerät nicht ansprechbar?
Warum Responsive Design nicht funktioniert
Responsive Design funktioniert nicht mehr, wenn eine Codezeile im Header einer HTML-Datei fehlt. Wenn diese einzelne Codezeile fehlt, gehen Ihr iPhone, Android und andere mobile Geräte davon aus, dass es sich bei der angezeigten Website um eine Desktop-Website in voller Größe handelt, und passen die Größe der Website an Ansichtsfenster den gesamten Bildschirm umfassen.
Was meinen Sie mit Ansichtsfenster und Ansichtsfenstergröße?
Auf allen Geräten bezieht sich die Größe des Ansichtsfensters auf die Größe des Bereichs einer Webseite, der derzeit für den Benutzer sichtbar ist. Stellen Sie sich vor, Sie halten ein iPhone 5 mit einer Breite von 320 Pixel. Sofern nicht ausdrücklich anders angegeben, gehen iPhones davon aus, dass jede Website, die Sie besuchen, eine Desktop-Site mit einer Breite von 980 Pixel ist.
Verwenden Sie jetzt Ihr imaginäres iPhone 5,Sie besuchen eine Website für Desktops mit einer Breite von 800 Pixel. Da das Layout nicht ansprechend ist, zeigt Ihr iPhone die Desktop-Version in voller Breite an.
Was ist mobiles Daten-Roaming?
Ein iPhone 5 ist jedoch nur 320 Pixel breit. Ist das nicht immer die Größe des Ansichtsfensters?
Nein, ist es nicht. Mit Ansichtsfenstergröße, Skalierung kann beteiligt sein . Das iPhone muss verkleinern, um die Vollversion der Webseite anzuzeigen. Denken Sie daran, dass sich das Ansichtsfenster auf den Bereich einer Seite bezieht, der derzeit für den Benutzer sichtbar ist. Wird dem iPhone-Benutzer derzeit nur 320 Pixel der Seite angezeigt, oder wird die Version in voller Breite angezeigt?
Das ist richtig: Sie sehen die Webseite in voller Breite auf ihrem Display, da das iPhone das Standardverhalten angenommen hat: Sie ist verkleinert, damit der Benutzer eine Webseite mit einer Breite von bis zu 980 Pixel anzeigen kann. Daher ist das Ansichtsfenster des iPhones 980px groß.
Beim Vergrößern oder Verkleinern ändert sich die Größe des Ansichtsfensters. Wir haben bereits gesagt, dass unsere imaginäre Website eine Breite von 800 Pixel hat. Wenn Sie also Ihr iPhone so zoomen, dass die Ränder der Website die Ränder des iPhone-Displays berühren, beträgt das Ansichtsfenster 800 Pixel. Das iPhone können Sie haben auf einer Desktop-Site ein Ansichtsfenster von 320 Pixel. In diesem Fall wird jedoch nur ein kleiner Teil davon angezeigt.
So entfernen Sie Widgets vom iPhone
Meine Responsive Website ist defekt. Wie behebe ich das?
Die Antwort ist eine einzelne HTML-Zeile, die das Gerät beim Einfügen in die Kopfzeile einer Webseite anweist, das Ansichtsfenster auf seine eigene Breite (320 Pixel bei einem iPhone 5) einzustellen und die Seite nicht zu skalieren (oder zu zoomen).
Weitere technische Informationen zu allen Optionen für dieses Meta-Tag finden Sie unter Dieser Artikel auf tutsplus.com .
So beheben Sie das WordPress X-Design, wenn es nicht reagiert
Zurück zu meinem Freund von früher: Diese eine Codezeile verschwand, als er das X-Thema aktualisierte. Beachten Sie beim Korrigieren Ihrer, dass das X-Design nicht nur eine Header-Datei verwendet, sondern unterschiedliche Header-Dateien für jeden Stapel, sodass Sie Ihre bearbeiten müssen.
warum schaltet sich mein iphone aus
Da Nick den Ethos-Stapel des X-Themas verwendet, musste er der zuvor erwähnten Header-Datei in x eine Codezeile hinzufügen, die ich zuvor erwähnt hatte /frameworks/views/ethos/wp-header.php . Wenn Sie einen anderen Stapel verwenden, ersetzen Sie 'ethos' durch den Namen Ihres Stapels (Integrität, Erneuern usw.), um die richtige Header-Datei zu finden. Fügen Sie diese eine Zeile ein und voila! Du kannst loslegen.
Damit werden auch meine CSS-Medienabfragen behoben?
Wenn Sie diese Zeile in den Header Ihrer HTML-Datei einfügen, funktionieren Ihre reaktionsschnellen @ media-Abfragen plötzlich wieder und die mobile Version Ihrer Website wird wieder zum Leben erweckt. Danke fürs Lesen und ich hoffe es hilft!
Denken Sie daran, Payette Forward,
David P.