Ein Freund von mir hat mich kürzlich kontaktiert, um 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 bemerkt hatte, dass seine Website auf seinem iPhone nicht richtig angezeigt wurde. Nick hat es selbst überprüft und tatsächlich funktionierte das schöne responsive Design, das er entworfen hatte, nicht mehr.
Ihn verwirrte außerdem die Tatsache, dass die Website reagierte, als er die Größe seines Browserfensters auf seinem Desktop änderte, aber auf seinem iPhone nur die Desktop-Version angezeigt wurde. Warum reagiert eine Website auf einem Desktop-Computer und nicht auf einem Mobilgerät?
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 Mobilgeräte davon aus, dass die angezeigte Website eine Desktop-Website in voller Größe ist, und passen die Größe des Viewport an. , um den gesamten Bildschirm einzuschließen.
Was meinst du mit Ansichtsfenster und Ansichtsfenstergröße?
Auf allen Geräten bezieht sich die Größe des Darstellungsbereichs auf die Größe des aktuell für den Benutzer sichtbaren Bereichs einer Webseite. Stellen Sie sich vor, Sie h alten ein iPhone 5 mit einer Breite von 320 Pixeln in der Hand. Sofern nicht ausdrücklich anders angegeben, gehen iPhones davon aus, dass jede von Ihnen besuchte Website eine Desktop-Website mit einer Breite von 980 Pixel ist.
Nun besuchen Sie mit Ihrem imaginären iPhone 5 eine Website, die für Desktops konzipiert ist und eine Breite von 800 Pixel hat. Es hat kein responsives Layout, daher zeigt Ihr iPhone die Desktop-Version in voller Breite an.
Nein, ist es nicht. Bei der Größe des Ansichtsfensters kann eine Skalierung einbezogen werden . Das iPhone muss herauszoomen, um die Webseite in voller Breite zu sehen. Denken Sie daran, dass sich Viewport auf den Bereich einer Seite bezieht, der derzeit für den Benutzer sichtbar ist. Sieht der iPhone-Benutzer derzeit nur 320 Pixel der Seite oder sieht er die Version in voller Breite?
Richtig: Sie sehen die Webseite in voller Breite auf ihrem Display, weil das iPhone sein Standardverh alten angenommen hat: Es wird herausgezoomt, sodass der Benutzer eine Webseite mit einer Breite von bis zu 980 Pixel anzeigen kann. Daher beträgt der Darstellungsbereich des iPhones 980 Pixel.
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 vergrößern würden, dass die Ränder der Website die Ränder des iPhone-Displays berühren, wäre der Darstellungsbereich 800 Pixel. Das iPhone kann auf einer Desktop-Site einen Darstellungsbereich von 320 Pixel haben, aber wenn dies der Fall wäre, würden Sie nur einen kleinen Teil davon sehen.
Meine responsive Website ist defekt. Wie behebe ich es?
Die Antwort ist eine einzelne HTML-Zeile, die, wenn sie in die Kopfzeile einer Webseite eingefügt wird, das Gerät anweist, den Darstellungsbereich auf seine eigene Breite einzustellen (320 Pixel im Fall eines iPhone 5) und nicht zu skalieren (oder vergrößern) Sie die Seite.
Für eine eher technische Diskussion aller Optionen im Zusammenhang mit diesem Meta-Tag lesen Sie diesen Artikel auf tutsplus.com.
Wie man das WordPress X-Design repariert, wenn es nicht reagiert
Zurück zu meinem Freund von vorhin: Diese eine Codezeile ist verschwunden, als er das X-Design aktualisiert hat. Wenn Sie Ihre reparieren, denken Sie daran, dass das X-Design nicht nur eine Header-Datei verwendet – es verwendet unterschiedliche Header-Dateien für jeden Stack, sodass Sie Ihre bearbeiten müssen.
Da Nick den Ethos-Stack des X-Designs verwendet, musste er die zuvor erwähnte Codezeile zur Header-Datei hinzufügen, die sich in x /frameworks/views/ethos/wp-header befand.php . Wenn Sie einen anderen Stack verwenden, ersetzen Sie „ethos“ durch den Namen Ihres Stacks (Integrity, Renew usw.), um die richtige Header-Datei zu finden. Fügen Sie diese eine Zeile ein und voila! Sie können loslegen.
Das behebt also auch meine CSS-Medienabfragen?
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 erwacht wieder zum Leben. Danke fürs Lesen und ich hoffe es hilft!
Denken Sie an Payette Forward, David P.
