échelle d'ajustement mobile contenu web à l'aide de la balise meta viewport

Je suis à essayer de comprendre comment exploiter les mobiles de la fenêtre d'affichage de la balise meta pour zoomer automatiquement le contenu d'une page HTML à intégrer dans un affichage web.

Contraintes:

Le code HTML peut ou peut ne pas avoir fixé la taille des éléments (ex-img a une largeur fixe de 640). En d'autres termes, je ne veux pas forcer le contenu pour être fluide et utiliser %s'.
Je ne sais pas la taille de la webview, je sais juste que son ratio d'aspect

Par exemple, si j'ai une seule image (640x100px) je veux l'image pour effectuer un zoom arrière si la webview est 300x250 (à l'échelle vers le bas pour s'adapter). D'autre part, si la webview est 1280x200 je veux l'image pour zoomer et de remplir les webview (à l'échelle pour s'adapter).

Après la lecture de la android docs et la iOS docs sur les fenêtres, il semble simple: depuis que je sais que la largeur de mon contenu (640) je viens de mettre la fenêtre d'affichage de la largeur de 640 et de laisser le webview décider si elle doit augmenter le contenu vers le haut ou vers le bas pour s'adapter à la webview.

Si j'ai mis le code suivant dans mon android/iPhone navigateur OU un 320 x 50 webview, l'image n'a pas de zoom 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>

Ce que je fais mal ici? La fenêtre d'affichage de la balise meta seulement zoomer sur le contenu qui est < la webview région?

avez-vous une solution pour cela?
Nan pas encore. Je devine pas de solution simple est possible

InformationsquelleAutor rynop | 2012-01-04

Dans la tête ajouter cette

//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>

de nice, à seulement quelques mods et de ses œuvres de nice
Solution sympa, mais je pense qu'il y a une faute de frappe dans la fenêtre d'affichage de la balise meta. L'attribut doit être contenu, pas de largeur, droit?

InformationsquelleAutor Bren1818

19

Je pense que cela devrait vous aider.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
```
Me dire si cela fonctionne.

P/s: voici quelques requêtes de média pour les appareils standard. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- Simple et fonctionne comme un charme
- Et avec qui vous allez ouvertement fait de l'amplification/zoom impossible pour les utilisateurs ayant une déficience visuelle, qui ne sont pas en mesure de lire dans une taille de police choisie par vous.
InformationsquelleAutor Daniel Ta
8

Pour Android il y a le plus de la cible-la densité de la balise.
```
target-densitydpi=device-dpi
```
Ainsi, le code devrait ressembler à
```
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />
```
Veuillez noter, que je crois que ce n'est plus seulement pour Android (mais puisque vous avez les réponses, j'ai senti que c'était un bon supplémentaires), mais ce devrait de travail pour la plupart des appareils mobiles.
- Merci, le réglage de l'objectif-densitydpi=2 a résolu mon problème comme par magie.
- cible-densitydpi a été retiré de WebKit trac.webkit.org/changeset/119527
InformationsquelleAutor Dave

ok, voici ma solution finale 100% javascript 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>

InformationsquelleAutor saike

2

Ajoutant style="width:100%;max-width:640px" à la balise d'image de mise à l'échelle jusqu'à la fenêtre d'affichage de la largeur, c'est à dire pour de plus grandes fenêtres, il va chercher à largeur fixe.
- pas à l'échelle, mais élargir
InformationsquelleAutor Axel
0

Essayez d'ajouter un style="width:100%;" à la balise img. De cette façon, l'image va se remplir toute la largeur de la page, donc mise à l'échelle vers le bas si l'image est plus grande que la fenêtre d'affichage.
- oui le problème est résolu si tout est fluide, mais pour mon 2ème point: "je ne veux pas forcer le contenu pour être fluide et utiliser %s'". Pensez à un site complet avec des tas d'éléments qu'il contient - vrd, toile, iframe, etc... je sais que le fixe avec de la page - je veux la webview pour effectuer un zoom in/out exactement à la largeur fixe je précise.
InformationsquelleAutor AlexanderZ
0

J'ai eu le même problème que le vôtre, mais ma préoccupation a été de liste. Lorsque j'essaie de défilement de l'affichage de la liste en-tête fixe également faire défiler à peu. Le problème a été vue de la liste de hauteur plus petite que la fenêtre d'affichage (navigateur) de hauteur. Vous avez juste besoin de réduire votre fenêtre d'affichage de la hauteur plus faible que le contenu de la balise (liste afficher dans le contenu de la balise) de hauteur.
Voici ma balise meta;
```
<meta name="viewport" content="width=device-width,height=90%,  user-scalable = no"> 
```
Espère que cela aidera.Thnks.

InformationsquelleAutor shalin

Vous devez vous connecter pour publier un commentaire.