web-dev-qa-db-fra.com

Comprendre Android mise à l'échelle de la méta-fenêtre d'affichage: que me manque-t-il?

J'ai essayé de déterminer comment la fenêtre - et le contenu qu'elle contient - sont affectés par la balise META de la fenêtre utilisée pour dessiner du contenu avec WebView ou avec le navigateur natif.

J'ai rencontré des incohérences apparentes. J'ai créé une petite page (voir ci-dessous) avec une image et du javascript pour afficher la taille de la fenêtre afin que je puisse voir visuellement la mise à l'échelle avec l'image ainsi que pour obtenir les nombres exacts.

Tout d'abord, quelques observations:

  1. Aucun des nombres de largeur de fenêtre n'est exactement ce que j'attendais, juste fermer.
  2. Lorsque les nombres sont proches du nombre de pixels de l'appareil, le dessin se fait en fait un pour un - ou du moins est visiblement le même.
  3. Si la taille de la page (taille du document) est inférieure à celle de la fenêtre, les numéros de la fenêtre diminuent. Autrement dit, la fenêtre ne représente pas nécessairement nécessairement l'espace visible maximal possible - juste l'espace visible actuel.
  4. De même, dans le navigateur natif, la taille de la fenêtre est ajustée par la barre supérieure. La taille augmente à mesure qu'elle défile hors de l'écran. Les chiffres donnés sont pour un affichage plein écran.

Appareil n ° 1: l'écran physique mesure 1024x600 et fonctionne Android 2.2.

  1. échelle initiale = 1.0 => 676x400
  2. échelle initiale = 1.0, largeur = largeur appareil => 676x400
  3. échelle initiale = 2, largeur = largeur appareil => 338x200
  4. échelle initiale = 2, largeur = largeur d'appareil, densité-cibledpi = périphérique-dpi => 507x300
  5. échelle initiale = 0,5, largeur = largeur d'appareil, densité-cibledpi = périphérique-dpi => 800x473
  6. échelle initiale = 0,9, largeur = largeur d'appareil, densité-cible dpi = appareil-dpi => 800x473
  7. width = largeur-périphérique, densité-cibledpi = périphérique-dpi => 1014x600
  8. échelle initiale = 1,0, largeur = largeur d'appareil, densité-cibledpi = périphérique-dpi => 1014x600
  9. échelle initiale = 0,5, largeur = largeur de l'appareil, densité-cible dpi = appareil-dpi, échelle minimale = 0,1 => 2028x768
  10. échelle initiale = 0,5, largeur = largeur de l'appareil, densité-cible dpi = appareil-dpi, échelle minimale = 0,1, échelle utilisateur = non => 1014x600

Appareil n ° 2: l'écran physique mesure 800 x 480 et fonctionne Android 2.3.2.

  1. échelle initiale = 1.0 => 527x320
  2. échelle initiale = 1,0, largeur = largeur appareil => 527x320
  3. échelle initiale = 2, largeur = largeur appareil => 263x160
  4. échelle initiale = 2, largeur = largeur d'appareil, densité-cibledpi = périphérique-dpi => 395x240
  5. échelle initiale = 0,5, largeur = largeur d'appareil, densité-cible dpi = appareil-dpi => 790 x 480
  6. échelle initiale = 1,0, largeur = largeur d'appareil, densité-cibledpi = périphérique-dpi => 790x480
  7. échelle initiale = 0,5, largeur = largeur de l'appareil, densité-cible dpi = appareil-dpi, échelle minimale = 0,1 => 1580x768
  8. échelle initiale = 0,5, largeur = largeur de l'appareil, densité cible dpi = appareil-dpi, échelle minimale = 0,1, échelle utilisateur = non => 790x480
  9. width = 1580, target-densitydpi = device-dpi => 790x480
  10. width = 1580, target-densitydpi = device-dpi => 790x480
  11. largeur = 1580, densité-cible dpi = périphérique-dpi, échelle minimale = 0,1 => 790x480

De ces résultats, les suivants n'ont pas de sens:

  1. Appareil n ° 1, éléments 5, 6 et 10
  2. Appareil n ° 2, éléments 5, 8, 10, 11, 12

Quelqu'un sait-il ce qui se passe avec ceux qui n'ont pas de sens?

Est-ce que quelqu'un sait pourquoi de nombreuses valeurs sont 10 pixels de moins que les pixels physiques, mais ce résultat est comme si elles correspondaient? (par exemple 1.7 et 2.6)

Suis-je en train de faire quelque chose de mal, ou semble-t-il qu'il est impossible de faire un zoom arrière au-delà de 1.0 à moins que l'utilisateur ne soit également autorisé à mettre à l'échelle et que la valeur d'échelle minimale soit définie?

Autrement dit, même si les valeurs valides sont de 0,01 à 10, les valeurs d'échelle initiale inférieures à 1,0 sont ignorées, sauf si vous pouvez également définir l'échelle minimale.

Les les documents Android le font indiquent que lorsque l'échelle de l'utilisateur est non, les valeurs d'échelle min/max sont ignorées. Cela ne semble pas très utile. Et 2.9-2.11 semble montrer que vous ne pouvez pas simplement le calculer vous-même et définir la largeur.

Enfin, le HTML que j'utilise:

<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
    <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script> 
$("#bl1").click(function(){
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

     $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script> 
</body>
</html>

Alors ... qu'est-ce qui me manque?

androidhtmlscaling
46
lilbyrdie

Boîte de vers intéressante que vous avez ouverte là-bas. En essayant plus d'appareils, vous verrez probablement encore plus de bizarreries et de bugs aléatoires. Moments intéressants! :-)

Je soupçonne que quelque part au bout du fil, vous voudrez peut-être abandonner, et essayez simplement de ...

  • Restez avec des paramètres aussi simples que possible.
  • Acceptez la largeur de pixel que l'appareil choisit de signaler.
  • Faites confiance à la disposition adaptative/fluide et aux largeurs relatives pour faire fonctionner les choses sur différentes largeurs d'écran.
  • Utilisez les propriétés CSS natives pour un rendu neutre en résolution des coins arrondis, des ombres et des dégradés.
  • Utilisez autant que possible les formats vectoriels (svg, icônes-polices, etc.)
  • et ( important ) Utilisez la haute résolution border-images ainsi que background-images couplé avec le support background-size propriété1 rendre les choses agréables et nettes2.

1) Pour fournir une compatibilité descendante avec les anciens navigateurs (comme MSIE8), vous devrez utiliser le double background-image déclarations - comme:

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

2) Le -webkit-max-device-pixel-ratio la requête média peut également aider, mais comme son nom l'indique, elle ne fonctionne que pour les navigateurs webkit.

Randonnée:

La nouvelle génération Android et iOS ont des DPI d'écran si variés qu'ils ont eu recours à des rapports pixels CSS plutôt qu'aux pixels réels de l'appareil. C'est à la fois bon ou mauvais - selon la façon dont vous le voyez.

C'est mauvais parce que vous n'êtes plus assuré du contrôle des pixels jusqu'au périphérique que vous aviez l'habitude d'avoir, en travaillant avec les écrans principalement homogènes d'autrefois.

D'un autre côté, c'est bon parce que vous savez que vos conceptions ne seront jamais si minuscules qu'elles ne peuvent pas être lues/utilisées par les humains ordinaires.

Le problème avec l'utilisation de target-densitydpi=device-dpi est que pendant qu'il fait des merveilles sur un écran de 800px de 7 pouces de large, il ruinera complètement votre application sur un écran de 960px de 4 pouces de large.

15
Már Örlygsson
$(document).ready(function() { 
$('meta[name=viewport]').attr('content','width=1024, user-scalable=no'); 
});

Semble fonctionner pour désactiver la mise à l'échelle de l'utilisateur après l'application de la mise à l'échelle correcte

2
Clinton Ward