Base de connaissances

La plupart du temps, un ou plusieurs objets de la page sont plus larges que l'écran d'un téléphone, ce qui rend toute la page trop large. Réglez ces objets sur Pleine largeur avec une Larg. max., et ils se réduiront pour s'adapter. L'écran d'un ordinateur est assez large pour masquer le problème, c'est pourquoi la page y semble correcte.

1. Vérifiez le type de votre page

Sélectionnez la page dans votre liste de pages, puis allez dans Inspecteur > Paramètres de page > Mise en page.

Ne changez pas la mise en page pour résoudre ce problème. Cela peut bouleverser votre conception, et ce changement ne peut pas être annulé.

2. Regardez la page sur votre téléphone

Une fenêtre de navigateur sur votre ordinateur ne correspond pas toujours à un vrai téléphone. Utilisez donc l'une de ces méthodes :

• Votre site Web publié : ouvrez-le dans une fenêtre de navigation privée sur votre téléphone. Une fenêtre privée n'utilise pas la copie enregistrée par votre navigateur. Si la page s'affiche correctement ainsi, votre site Web est en ordre : consultez J'ai publié, mais mon site Web affiche encore l'ancienne version.
• Avant de publier : cliquez sur Aperçu dans la barre d'outils, choisissez Preview QR Code (aperçu par code QR) et scannez le code avec l'appareil photo de votre téléphone.

Si l'aperçu par code QR ne se charge pas :

• Connectez votre téléphone et votre ordinateur au même réseau Wi-Fi, et désactivez tout VPN ou iCloud Private Relay.
• Si EverWeb indique que le serveur d'aperçu local n'est pas activé, allez dans EverWeb > Réglages > Général sur Mac, ou dans Édition > Options > Général sur Windows, et cochez Utiliser le serveur de prévisualisation.

Notez les objets qui dépassent, puis corrigez-les un par un.

3. Pages adaptatives : corrigez chaque objet trop large

Vous êtes au bon endroit si la page glisse sur le côté, présente une bande blanche sur un côté, est coupée ou est poussée vers la gauche.

1. Sélectionnez l'objet. S'il apparaît sur toutes les pages, il se trouve probablement sur une page maîtresse : modifiez-le là.
2. Allez dans Inspecteur > Mesures (la troisième icône).
3. Sous Taille, cochez Pleine largeur.
4. Dans Larg. max., saisissez la largeur maximale que l'objet doit avoir sur un grand écran, par exemple sa largeur actuelle. Le champ reste grisé tant que Pleine largeur n'est pas coché. Laissez 0 pour remplir toute la page.
5. Si Larg. min. contient une valeur, vérifiez qu'elle est inférieure à la largeur d'un téléphone. Les téléphones font environ 375 pixels de large. 0 signifie aucun minimum.
6. Sous Marges et remplissage, ramenez les grandes marges gauche ou droite à 0 ou à une petite valeur. Les marges s'ajoutent à la largeur.
7. Répétez l'opération pour chaque objet qui dépasse.

Deux exceptions :

• L'objet ne peut pas être en Pleine largeur. Certains widgets ont toujours une largeur fixe, comme les widgets Facebook Page Timeline et PayPal (Legacy). Placez-les dans un conteneur d'environ 280 à 320 pixels de large.
• L'objet ne passe pas en Pleine largeur, ou reste trop large, dans une ligne réactive. Faites un clic droit dessus (ou Contrôle-clic sur Mac), choisissez Supprimer de la ligne réactive, puis suivez les étapes ci-dessus.

4. Images : évitez qu'elles soient écrasées ou laissent des espaces vides

Terminez d'abord l'étape 3 pour l'image, puis :

1. Sélectionnez l'image et allez dans Inspecteur > Options de forme (la deuxième icône).
2. Sous Remplissage, dans le menu déroulant de mise à l'échelle de l'image, choisissez Adapter à l'échelle.
3. Cochez Ajuster la hauteur à l'image. Cela supprime l'espace vide au-dessus et en dessous de l'image sur un téléphone. Cette option fonctionne sur les images réglées sur Pleine largeur et Adapter à l'échelle.

Si une image s'affiche sur votre ordinateur mais pas sur votre téléphone, essayez de passer de Remplir à l'échelle à Adapter à l'échelle.

5. Une section remonte sur une autre

Un conteneur de hauteur fixe ne peut pas s'agrandir quand son contenu a besoin de plus de place sur un téléphone : la section suivante vient alors se placer par-dessus.

1. Sélectionnez le conteneur. Si vous sélectionnez sans cesse son contenu, faites un clic droit et utilisez Choisir une couche.
2. Allez dans Inspecteur > Réglages des widgets (la roue dentée, la dernière icône).
3. Sous Dimensionnement, réglez Hauteur sur Auto.
4. Réglez Hauteur max sur 0, ce qui signifie aucune limite.
5. Faites de même pour tous les conteneurs qu'il contient.

Vérifiez aussi que l'objet n'est pas réglé sur Autoriser le glissement libre (Inspecteur > Mesures, sous Position). Un objet placé librement ne repousse rien vers le bas, et il peut donc recouvrir d'autres contenus sur un téléphone. Décochez la case si l'objet doit suivre le déroulement de la page.

6. Pages en mise en page centrée

Toute la page est trop petite ou coupée sur un téléphone. Ce type de page garde sa largeur d'ordinateur. Donnez-lui une page distincte pour les téléphones : consultez Mon site Web s'affiche mal sur un téléphone.

Le texte se chevauche ou déborde de ses zones sur un téléphone. Sur un téléphone, le texte peut occuper plus de lignes que prévu et ne plus tenir dans sa zone. Utilisez Taille de Police Minimum pour que le texte puisse rapetisser sur un petit écran :

1. Sélectionnez le texte.
2. Ouvrez l'Inspecteur de texte et allez à la section Police.
3. Gardez votre taille habituelle dans le champ Font Size (taille de police). Dans le champ Taille de Police Minimum, saisissez la plus petite taille souhaitée sur un téléphone. Par exemple, avec une taille de police de 24, vous pourriez saisir 18.
4. Allez dans Fichier > Publier le site entier.

Si tout votre texte se trouve dans une ou deux grandes zones de texte, placez aussi chaque paragraphe dans sa propre zone de texte. Les longues zones s'agrandissent sur un téléphone et décalent les autres éléments.

7. Vérifiez que le problème est résolu

1. Publiez votre site Web. Si vous avez modifié plusieurs pages, utilisez Fichier > Publier le site entier. Consultez Quelle est la différence entre Publier et Publier le site entier ?
2. Ouvrez la page dans une fenêtre de navigation privée sur votre téléphone.

Une fois le problème résolu, la page ne glisse plus sur le côté, rien n'est coupé et rien ne se superpose. Vérifiez aussi vos autres pages, car elles utilisent souvent les mêmes réglages.

Si vous voyez encore l'ancienne page, consultez Comment vider le cache du navigateur.

8. Toujours un problème ? Envoyez-nous votre fichier de projet

Nous pouvons voir votre site Web publié, mais pas votre fichier de projet (la copie modifiable de votre site Web, enregistrée sur votre ordinateur). Avec ce fichier, nous pouvons trouver l'objet exact qui pose problème.

1. Allez dans Fichier > Fenêtre de projets pour ouvrir la liste de vos sites Web, intitulée Bienvenue dans EverWeb.
2. À côté de votre projet, cliquez sur les trois points sur Mac, ou sur la flèche vers le bas sous Windows.
3. Choisissez Envoyer le fichier projet au Support.
4. Une fois l'envoi terminé, EverWeb vous donne un lien. Envoyez-nous ce lien.

Si votre projet dépasse 2 Go, ou si l'envoi n'aboutit pas, utilisez plutôt notre page d'envoi de projets. Sous Windows, compressez (zip) tout le dossier qui contient votre projet, et pas seulement le fichier .ewwinproj.

Indiquez-nous aussi :

• Le nom de la page, et celui de l'objet qui s'affiche mal
• Votre version d'EverWeb
• Si vous êtes sur Mac ou sur Windows

Et envoyez deux captures d'écran : une de la page sur votre téléphone, et une de la fenêtre EverWeb complète avec cet objet sélectionné.

Articles associés

• Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb
• Pourquoi cet objet ne va-t-il pas là où je le fais glisser ?
• J'ai publié, mais mon site Web affiche encore l'ancienne version
• Quelle est la différence entre Publier et Publier le site entier ?
• Comment vider le cache du navigateur