web-dev-qa-db-fra.com

Comment puis-je forcer un site à évoluer pour le réparer pour mobile

Lorsque je charge mon site dans un iphone, sa taille ne diminue pas. Tout ce que je vois, ce sont les quelques centaines de pixels en haut à gauche. Je suis novice en optimisation mobile, mais j’ai l’impression que la plupart des pages défilent pour s’ajuster automatiquement, et la plupart des questions semblent concerner le scénario opposé que je suis confronté (forcer téléphone pas à réduire).

Je voudrais que toute la largeur de la page soit visible et permette à l'utilisateur de zoomer pour lire le texte.

J'ai essayé avec et sans le code suivant dans la tête, mais sans effet apparent.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">
androidiphonemobileviewport
36
Zach Lysobey

Utilisation de la documentation ici: https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Il semblait que vous deviez ignorer la plupart des propriétés de la fenêtre d'affichage et définir simplement "Oui" pour "scalable". Cela fonctionne sur mon iphone maintenant.

<meta name="viewport" content="user-scalable = yes">

Edit :: Le site de test mobile ne permet pas la mise à l’échelle, il donne juste des barres de défilement. Avec un téléphone réel, cela fonctionne.

48
Gregg B

essayez d'utiliser différents CSS et de les changer (côté serveur) en fonction des paramètres du client. Par exemple, l'iPhone s'identifiera comme suit: 

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Selon le langage de script disponible côté serveur, vous pouvez modifier le fichier css.

Here est un exemple.

4
alinoz

La balise viewport contrôle quelle partie de la page sera affichée initialement, mais la page elle-même doit toujours être conçue pour une taille d'écran de 320x460 à afficher sur l'iPhone sans zoom. Si vous ne souhaitez pas modifier la structure de la page, la fenêtre d'affichage vous permet de contrôler le mode d'affichage initial de la page.

2
Jerry

Débarrassez-vous du width=1024, insérez-le simplement 

<meta name="viewport" content="width=device-width, initial-scale=1" />

Et vider le cache du navigateur de votre téléphone. Peut-être même avoir à éteindre et rallumer après.

0
Web Guy