web-dev-qa-db-fra.com

La page Web commence à zoomer sur les appareils mobiles

J'utilise ce code sur ma page web

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

Je pense que l'échelle initiale garantirait un zoom arrière sur la page Web, mais ce n'est pas le cas. Des idées?

J'ai essayé ceci:

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

Mais, j'ai besoin que la largeur soit réglée sur 1000 px ou elle ne semble pas correcte.

Réponse:

<meta name="viewport" content="width=1000; user-scalable=0;" />
htmlviewport
26
EGHDK

initial-scale=1.0 indique au navigateur de régler le niveau de zoom sur normal (c'est-à-dire sans zoom avant ou arrière). Vous avez seulement besoin de width=1000:

<meta name="viewport" content="width=1000">
37
Jeffery To

Essaye ça:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

ou

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

Je pensais aussi que le problème était le port de visualisation, mais après l’avoir testé, j’imaginais que viewport n’était pas le problème. 

Le problème dans mon cas était le CSS: largeur fixe ou width: 100% au lieu de width: auto. Donc, si vous trouvez que la fenêtre d'affichage n'est pas le problème, CSS sera probablement votre prochaine estimation.

J'espère que cela pourra aider!

3
Alexey Shevelyov

J'ai essayé de jouer avec 

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

et il semble que mon site soit bien rendu 1000 pixels de large à l'échelle 1. Cependant, l'écran de mon téléphone n'ayant pas d'espace pour le site, le site reste en dehors de la fenêtre d'affichage.

En définissant cette valeur, le site fait un zoom arrière large de 1000 pixels:

 <meta name="viewport" content="width=1000">

Est-ce votre problème? 

Sur une note de côté, 1000px sonne un peu large pour un site Web mobile, mais je suppose que ce site Web n'a pas été conçu à l'origine pour les appareils mobiles?

1
Robert Fricke

Vous pouvez utiliser ceci.

    <meta name="viewport" content="width=100%">
0
Sundar

Essayez cela vous aidera ... Cela a fonctionné pour moi

 <meta name="viewport" initial-scale=1.0 content="width=100%">
0
Pranesh

J'ai eu un problème similaire. Essaye ça:

<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>

Je pense que cela a à voir avec l'échelle minimale, mais je ne suis pas très sûr.

0
nevi_me