Fixation du rapport "La page n'est pas adaptée aux mobiles" à partir du test Google
Dans les résultats de recherche, Google indique que "cette page n’est pas adaptée aux appareils mobiles". Je veux résoudre ce problème.
lorsque je teste mon site Web dans le test adapté aux appareils mobiles, il indique:
- Contenu plus large que l'écran.
- Éléments cliquables trop rapprochés.
Comment puis-je trouver les éléments/contenus qui créent ces problèmes?
Toute aide serait appréciée.
D'après mon expérience, l'outil Google n'est tout simplement pas assez intelligent pour comprendre les techniques CSS ou autres que vous avez peut-être utilisées pour rendre votre écran convivial. Par exemple, j'ai eu des tables qui suppriment des colonnes en fonction de la largeur de l'écran et utilisaient même des amorces "table-responsive", mais jusqu'à ce que je mette dans un div inutile le style "overflow-x: auto;" il a estimé que le contenu est plus large que l'écran. De même, je dépose certains éléments cliquables sur un facteur de forme réduit, mais Google estime néanmoins que les éléments cliquables sont trop proches les uns des autres, même s'ils n'apparaissent pas sur un appareil mobile.
C'est juste un outil stupide, vous devez trouver des solutions de contournement ou mettre votre contenu en sourdine.
J'ai vu les mêmes erreurs et le problème n'était pas évident. J'avais des widgets collants qui débordaient de liens dans mon pied de page lorsqu'il était affiché dans la plus petite fenêtre. J'ai utilisé CSS pour masquer le widget sur des écrans plus petits et le soumettre de nouveau à Google comme corrigé. Google a signalé le problème corrigé dans les 24 heures.
- Contenu plus large que l'écran.
- Le contenu de votre page provoque un débordement horizontal. Vous devriez pouvoir répliquer le problème en modifiant le point de vue de votre navigateur et voir si cela provoque un débordement. Vous pouvez également essayer l'URL de Google Fetch, mais les résultats seront limités.
- La méthode la plus simple et la meilleure pour tester la compatibilité mobile consiste à utiliser ChromeOutils de développement débogage à distance sur un périphérique Android , de cette façon, vous pouvez utiliser "élément de contrôle" sur l'appareil mobile, dans le confort de votre ordinateur de bureau.
Éléments cliquables trop rapprochés.
- Celui-ci devrait être assez évident, vos éléments sont trop proches.
Il est plus difficile pour les utilisateurs d’appuyer avec précision sur un écran tactile que des liens ou des boutons compacts ou compactés qu’avec un curseur de souris classique. Pour éviter que les utilisateurs ne soient frustrés par l'impact accidentel sur les mauvaises cibles, les cibles tactiles doivent être suffisamment larges et éloignées des autres cibles tactiles pour qu'un utilisateur puisse les presser sans que leur doigt ne se superpose à aucune autre cible. La taille moyenne du pavé de doigts adulte mesure environ 10 mm de large (un peu moins d'un demi-pouce) et les consignes de Android UI recommandent une taille de cible minimale de 7 mm, ou 48 pixels CSS, sur un site doté d'un Définissez correctement la fenêtre d'affichage mobile.
Pour vous donner une idée de l'espacement correct pour un appareil mobile et parce que c'est une bonne pratique, je vous recommande de vérifier métriques de conception de matériau et clés de Google .