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 a redimensionné la fenêtre de son navigateur sur son bureau, le site a été responsive, 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 la conception réactive 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 les 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 fenêtre pour englober tout l'écran.
Qu'entendez-vous par fenêtre et taille de fenêtre?
Sur tous les appareils, la taille de la fenêtre fait référence à la taille de la zone d'une page Web actuellement visible par l'utilisateur. Imaginez que vous tenez un iPhone 5 d’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, en utilisant votre iPhone 5 imaginaire,vous visitez un site Web conçu pour un ordinateur de bureau de 800 pixels de large. Il n'a pas de mise en page réactive, de sorte que votre iPhone affiche la version de bureau pleine largeur.
pourquoi mon iphone 5s n'arrête pas de s'éteindre
Mais un iPhone 5 ne mesure que 320 pixels de large. N'est-ce pas toujours la taille de la fenêtre?
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 fait référence à la zone d'une page actuellement visible par 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 pleine largeur sur leur écran, car l'iPhone a adopté le comportement par défaut: il est réduit pour 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 mesure 980 pixels.
Lorsque vous effectuez un zoom avant ou arrière, la taille de la fenêtre change. Nous avons dit précédemment que notre site Web imaginaire avait une largeur de 800 pixels, donc si vous zoomiez sur votre iPhone afin que les bords du site Web touchent les bords de l'écran de votre iPhone, la fenêtre d'affichage serait de 800 pixels. L'iphone pouvez avoir une fenêtre d'affichage de 320 pixels sur un site pour ordinateur, mais si c'est le cas, vous n'en verrez qu'une petite partie.
pourquoi je ne peux pas télécharger de podcasts
Mon site Web réactif est cassé. Comment je le répare?
La réponse est une seule ligne de 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 sur sa propre largeur (320 pixels dans le cas d'un iPhone 5) et de ne pas mettre à l'échelle (ou zoomer) la page.
Pour une discussion plus technique de toutes les options liées à cette balise meta, consultez cet article sur tutsplus.com .
Comment réparer le thème WordPress X lorsqu'il n'est pas réactif
De 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 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.
quelqu'un peut-il pirater votre iphone
Étant donné que Nick utilise la pile Ethos du thème X, il a dû ajouter une ligne de code que j'ai mentionnée précédemment au fichier d'en-tête situé 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 fichier d’en-tête correct. Insérez cette ligne, et le tour est joué! Vous êtes prêt à partir.
Donc, cela corrige mes requêtes multimédias CSS, aussi?
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!
N'oubliez pas de Payette Forward,
David P.