Un de mes amis m'a récemment contacté pour demander de l'aide avec un site WordPress qu'il avait construit en utilisant le thème X. Son client l'avait appelé ce matin-là après avoir remarqué que son site Web ne s'affichait pas correctement sur son iPhone. Nick l'a vérifié lui-même, et bien sûr, le beau design réactif qu'il a conçu ne fonctionnait plus.
Il était encore plus mystifié par le fait que lorsqu'il redimensionnait la fenêtre de son navigateur sur son bureau, le site était réactif, mais sur son iPhone, seule la version de bureau était affichée. Pourquoi un site serait-il réactif sur un ordinateur de bureau et non réactif sur un appareil mobile ?
Pourquoi le Responsive Design ne fonctionne pas
La conception réactive cesse de fonctionner lorsqu'une ligne de code manque dans l'en-tête d'un fichier HTML. Si cette seule ligne de code est manquante, votre iPhone, Android et d'autres appareils mobiles supposeront que le site Web que vous consultez est un site de bureau en taille réelle et ajusteront la taille du viewportpour englober tout l'écran.
Qu'entendez-vous par fenêtre et taille de la fenêtre ?
Sur tous les appareils, la taille de la fenêtre d'affichage fait référence à la taille de la zone d'une page Web actuellement visible pour l'utilisateur. Imaginez que vous tenez un iPhone 5 avec une largeur de 320 pixels. Sauf indication contraire explicite, les iPhones supposent que chaque site Web que vous visitez est un site de bureau d'une largeur de 980 pixels.
Maintenant, à l'aide de votre iPhone 5 imaginaire, vous visitez un site Web conçu pour les ordinateurs de bureau et d'une largeur de 800 pixels. Il n'a pas de mise en page réactive, de sorte que votre iPhone affiche la version de bureau pleine largeur.
Non ce n'est pas. Avec la taille de la fenêtre, la mise à l'échelle peut être impliquée . L'iPhone doit effectuer un zoom arrière pour voir la version pleine largeur de la page Web. N'oubliez pas que la fenêtre d'affichage fait référence à la zone d'une page qui est actuellement visible pour l'utilisateur. L'utilisateur de l'iPhone ne voit-il actuellement que 320 pixels de la page, ou voit-il la version pleine largeur ?
C'est vrai : ils voient la page Web en pleine largeur sur leur écran, car l'iPhone a supposé qu'il s'agit du comportement par défaut : il fait un zoom arrière afin que l'utilisateur puisse afficher une page Web jusqu'à une largeur de 980 pixels. Par conséquent, la fenêtre d'affichage de l'iPhone est de 980 pixels.
Lorsque vous effectuez un zoom avant ou arrière, la taille de la fenêtre d'affichage change. Nous avons déjà dit que notre site Web imaginaire avait une largeur de 800px, donc si vous deviez zoomer sur votre iPhone de sorte que les bords du site Web touchent les bords de l'écran de votre iPhone, la fenêtre d'affichage serait de 800px. L'iPhone peut avoir une fenêtre d'affichage de 320 pixels sur un site de bureau, mais si c'était le cas, vous n'en verriez qu'une petite partie.
Mon site Web réactif est en panne. Comment je le répare?
La réponse est une seule ligne de code HTML qui, lorsqu'elle est insérée dans l'en-tête d'une page Web, indique à l'appareil de définir la fenêtre d'affichage sur sa propre largeur (320 px dans le cas d'un iPhone 5) et non à l'échelle (ou zoomer) la page.
Pour une discussion plus technique de toutes les options liées à cette balise méta, consultez cet article sur tutsplus.com.
Comment réparer le thème WordPress X lorsqu'il ne répond pas
Retour à mon ami d'avant : cette ligne de code a disparu lorsqu'il a mis à jour le thème X. Lorsque vous corrigez le vôtre, gardez à l'esprit que le thème X n'utilise pas qu'un seul fichier d'en-tête - il utilise différents fichiers d'en-tête pour chaque pile, vous devrez donc modifier le vôtre.
Puisque Nick utilise la pile Ethos du thème X, il a dû ajouter la ligne de code que j'ai mentionnée précédemment au fichier d'en-tête qui se trouvait dans x /frameworks/views/ethos/wp-header.php. Si vous utilisez une pile différente, remplacez le nom de votre pile (Integrity, Renew, etc.) par « ethos » pour trouver le bon fichier d'en-tête. Insérez cette ligne, et le tour est joué ! Vous êtes prêt à partir.
Donc, cela corrige également mes requêtes média CSS ?
Lorsque vous insérez cette ligne dans l'en-tête de votre fichier HTML, vos requêtes @media réactives recommenceront soudainement à fonctionner et la version mobile de votre site Web reprendra vie. Merci d'avoir lu et j'espère que cela vous aidera !
Souvenez-vous de Payette Forward, David P.
