web-dev-qa-db-fra.com

La méta-balise Viewport ne fonctionne pas sur iPhone et Android

J'utilise le code html suivant

<!DOCTYPE HTML>
  <html>
    <head>
     <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
  </html>

Mon intention est d'empêcher l'utilisateur d'effectuer un zoom avant ou arrière. Le code ci-dessus ne fonctionne pas sur iPhone et Android. Toute solution ?

EDIT: Il apparaît dans les paramètres de l'iPhone. Si Zoom est sélectionné comme On sous Settings>Accessibility>Zoom, cela annulera la balise méta. La source

Vous ne savez pas pourquoi cela se passe dans Android.

androidiphonehtmlmeta-tagsviewport
17
Prabhat

J'utilise cette balise pour empêcher le zoom sur toutes les plateformes mobiles:

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

Avec , et non ;

6
ChristopheCVB

Pour ma part, j'ai cette "fenêtre" qui fonctionne bien sur un Android (Nexus 5) et sur un iPhone.

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

J'espère que cela vous aidera!

4
Joffrey Outtier

Mettez ce script pour éviter le zoom par pincement. dans la dernière version de safari, si la balise META ne fonctionne pas

   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);
2
neel upadhyay
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

a bien fonctionné sur Samsung Galaxy S3

1
Adam Rifai

Il semble que cela ne fonctionne plus dans le navigateur iOS (11.3) normal. 

Cependant, cela affecte toujours la page Web, si elle est ajoutée à l'écran d'accueil et lancée à partir de là.

Donc, si vous touchez le menu de partage, sélectionnez "Ajouter à l'écran d'accueil", puis ouvrez-le, il vous empêchera de zoomer comme prévu:

<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="Apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
1
luckydonald

Quelque temps, vous devez ajouter -webkit-flex: 1 aux conteneurs (si la flexbox est utilisée). Cela m'a aidé avec mon problème de viewport.

0
Anton Golova