web-dev-qa-db-fra.com

adapter le contenu Web mobile à l'aide de la balise méta Viewport

J'essaie de comprendre comment utiliser la balise méta de la fenêtre d'affichage mobile pour zoomer automatiquement le contenu d'une page HTML afin de l'adapter à une vue Web. 

Contraintes:

  • Le code HTML peut avoir ou non des éléments de taille fixe (ex img a une largeur fixe de 640). En d'autres termes, je ne veux pas forcer le contenu à être fluide et à utiliser les%.
  • Je ne connais pas la taille de la vue Web, je connais juste son format

Par exemple, si je n'ai qu'une seule image (640x100px), je souhaite que l'image effectue un zoom arrière si la vue Web mesure 300x250 (réduire l'échelle pour l'adapter). D'autre part, si la vue Web mesure 1280x200, je souhaite que l'image soit agrandie et remplie la vue Web (redimensionner à la taille souhaitée).

Après avoir lu les documents Android et les documents iOS sur les fenêtres, cela semble simple: comme je connais la largeur de mon contenu (640), je règle simplement la largeur de la fenêtre à 640 et laisse la vue Web le décider si doit adapter le contenu à la hauteur de la vue Web.

Si je mets les éléments suivants dans une vue Web 320 x 50 dans mon navigateur Android/iPhone OR, l'image ne fait pas un zoom arrière pour s'adapter à la largeur. Je peux faire défiler l'image à droite et à gauche ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test Viewport</title>
    <meta name="viewport" content="width=640" />
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      vertical-align: top;
    }

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    {
      margin: 0;
      padding: 0;
      border: 0;
      font-weight: normal;
      font-style: normal;
      font-size: 100%;
      line-height: 1;
      font-family: inherit;
      vertical-align: top;
    }       
    </style>
  </head>
  <body>
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg">
  </body>
</html>

Qu'est-ce que je fais mal ici? La balise méta de la fenêtre d'affichage effectue-t-elle uniquement un zoom sur le contenu <de la zone de visualisation Web?

androidiphoneiosmobileviewport
33
rynop

Dans la tête, ajoutez ceci

//Include jQuery
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script type="text/javascript">
$(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
  var mw = 480; // min width of site
  var ratio =  ww / mw; //calculate ratio
  if( ww < mw){ //smaller than minimum size
   $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
  }else{ //regular size
   $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
  }
}
});
</script>
55
Bren1818

Je pense que cela devrait vous aider.

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

Dis-moi si ça marche.

P/s: voici une requête de média pour les périphériques standards. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

19
Daniel Ta

Pour Android, il y a l'ajout d'un tag de densité cible.

target-densitydpi=device-dpi

Donc, le code ressemblerait à

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

Veuillez noter que je pense que cet ajout concerne uniquement Android (mais puisque vous avez des réponses, j’ai pensé que c’était un bon extra), mais cela devrait fonctionner pour la plupart des appareils mobiles.

8
Dave

ok, voici ma solution finale avec du javascript 100% natif:

<meta id="viewport" name="viewport">

<script type="text/javascript">
//mobile viewport hack
(function(){

  function apply_viewport(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)   ) {

      var ww = window.screen.width;
      var mw = 800; // min width of site
      var ratio =  ww / mw; //calculate ratio
      var viewport_meta_tag = document.getElementById('viewport');
      if( ww < mw){ //smaller than minimum size
        viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw);
      }
      else { //regular size
        viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww);
      }
    }
  }

  //ok, i need to update viewport scale if screen dimentions changed
  window.addEventListener('resize', function(){
    apply_viewport();
  });

  apply_viewport();

}());
</script>
5
saike

Ajouter style="width:100%;max-width:640px" à la balise d’image augmentera l’échelle jusqu’à la largeur de la fenêtre, c’est-à-dire que pour les grandes fenêtres, il aura une largeur fixe.

2
Axel

Essayez d'ajouter un style = "width: 100%;" à la balise img. De cette façon, l'image remplira toute la largeur de la page, réduisant ainsi l'échelle si l'image est plus grande que la fenêtre d'affichage.

0
AlexanderZ

J'ai eu le même problème que le vôtre, mais ma préoccupation était vue de liste. Lorsque j'essaie de faire défiler la liste vue en-tête fixe défiler aussi peu. Le problème était la hauteur de la vue liste était inférieure à la hauteur de la fenêtre (navigateur). Vous avez juste besoin de réduire la hauteur de votre fenêtre d'affichage en dessous de la balise content (liste dans la balise content) height . Voici ma balise meta;

<meta name="viewport" content="width=device-width,height=90%,  user-scalable = no">

J'espère que cela vous aidera.

0
shalin