web-dev-qa-db-fra.com

Ergonomie Google Mobile> Contenu plus large que l'écran

Impossible de corriger l'erreur Google Mobile Ergonomie> Contenu plus large que l'écran de la console de recherche Google. J'ai essayé l'émulateur de disposition mobile de chrome de DevTools, définissez une largeur de 320 pixels, mais aucun défilement horizontal ne s'affiche. Donc, tout semble bien dans l'émulateur, mais Google soulève une erreur. Ensuite, j'ai ajouter au CSS:

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

Mais pas d'effet, l'erreur persiste encore.

L'outil Test Live URL ne montre aucune erreur, toutes les pages sont conviviales pour les mobiles.

Une idée comment résoudre ce problème? Je suis sûr que c'est un bug de Google, mais comment l'éviter?

3
LeonidMew

J'ai supprimé tous les "position: absolute" des classes, peu importe si l'élément absolu convient parfaitement sur un petit écran. Mais ces classes étaient affectées à du contenu caché, ce qui convenait parfaitement au plus petit écran de smartphone, et la plupart d’entre elles n’étaient connectées à aucun élément de page, car les éléments étaient protégés par un mot de passe.

J'ai trouvé un moyen d'accélérer le rendu des pages sans attendre longtemps après avoir cliqué sur "demander l'indexation". Tout d’abord, créez une nouvelle page en utilisant les modèles de site et les CSS, le texte de la page doit être unique (aide de Lorem Ipsum Generator à cet égard). Deuxièmement, créez un autre fichier de sitemap avec une seule URL pointant vers un nouveau fichier, soumettez-le et, en 5 minutes, vous aurez une page explorée et indexée. Cela aide beaucoup lors de la recherche d'un bogue dans template ou css.

Edit: Depuis la suppression de la position absolue a brisé la conception de l'interface utilisateur, je le redéfinir avec javascript.

1
LeonidMew

Vérifiez les appareils réels au lieu de l'émulateur. Supprimez chaque section et vérifiez de manière itérative, vous saurez laquelle est la cause du défilement horizontal

0