Le serveur Web veut obtenir des informations comme la taille de l'écran de chaque téléphone mobile qui navigue sur une page Web. Les fonctions Javascript screen.width et screen.height renvoient des valeurs follement inexactes.Android comment renifler la taille de l'écran du navigateur webkit?
Y a-t-il un moyen pour le serveur Web de détecter la taille de l'écran du téléphone mobile? Le navigateur client est webkit sur Android.
Vous pouvez essayer d'utiliser des requêtes de média CSS, qui devraient utiliser les bonnes valeurs.
<link rel="stylesheet" type="text/css"
media="only screen and (min-device-width: 320px)"
href="logResolutionScript?width=320" />
Utilisez essentiellement les mêmes règles pour les autres largeur et hauteur et un biscuit pour vérifier si un client se charge plus d'un stylesheet pour obtenir la valeur correcte. Vous n'obtiendrez pas la résolution exacte, mais cela devrait être assez proche. Vous pouvez également vérifier l'orientation et utiliser des combinaisons de largeur maxi-/min- (périphérique). Votre fichier peut se retrouver avec un grand nombre d'importations css, mais vous devriez être en mesure de déterminer la résolution du client assez précisément, malheureusement au prix de quelques requêtes HTTP.
J'ai trouvé this article utile qui mentionne une balise meta qui affecte les navigateurs Android et iPhone qui fait ce que je avais besoin:
<meta name="viewport" content="initial-scale=1.0">
de l'article de Mislav: Qu'est-ce que Safari Mobile fait par défaut (sans cette directive) affiche une version agrandie de 980px de la page, même si la mise en page elle-même est plus étroite. En tant qu'auteurs de contenu, avec cette directive, nous disons «faites-moi confiance, montez à l'échelle naturelle et je m'assurerai qu'il s'adapte»
Il semble que les valeurs de la taille et de la largeur de l'écran soient correctes à la lecture de JavaScript car la page n'est pas zoomé (et si la page est plus grande, vous pouvez toujours la faire défiler). Alternativement, il y a probablement une variable javascript pour lire le niveau de zoom. Pour l'iPhone, il s'agit de documented here.
Sur Android, vous pouvez calculer le zoom actuel en ajoutant un div absolu au corps de la largeur de 100%, et en divisant le offsetWidth div de window.innerWidth.
var iPadMeasureWidthNode = window.iPadWNode;
if (!iPadMeasureWidthNode) {
iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
// .ipad-measure-w {position:absolute; width:100%; top:-1px}
iPadMeasureWidthNode.className = 'ipad-measure-w';
document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
}
var zoominverse = 1000/Math.round(1000 * iPadMeasureWidthNode.offsetWidth/window.innerWidth);
Vous pouvez garder un élément à 1: 1 zoom en inversant (défaisant) la quantité de zoom:
// Not using scale3d because is hardware zooming which is ugly unreadable blurry pixel magnification.
node.style.webkitTransform = (zoominverse > 1) ? 'scale(' + zoominverse + ')' : '';
node.style.webkitTransformOrigin = (zoominverse > 1) ? '0 0 0' : '';
changement Zoom est détecté par window.onresize événement (même si l'événement Resize est retardée jusqu'à ce redimensionnez est terminée ... vous pouvez détecter le début du zoom en utilisant l'événement gesturestart sur iPad ou document.touchstart et détecter 2 doigts vers le bas). Edit: Après trois corrections indiquant que cela ne fonctionne pas, j'ai pensé que je ferais mieux d'ajouter un exemple montrant le fonctionnement. Testé fonctionne sur: Android 4.1.2 navigateur normal, Android 4.1.2 Chrome, Android Opera Mobile 12.10, iPad 2 iOS4. (N'a pas fonctionné sur Android Firefox Mobile, et ne fonctionnera pas dans un iframe alors jsfiddle ne fonctionnera pas).
<!DOCTYPE html>
<html>
<head>
<style>
.ipad-measure-w {
position: absolute;
width: 100%;
top: -1px;
};
</style>
</head>
<body>
<button onclick="alertWidth()">alertWidth</button>
<div style="width: 1600px; height: 100px; background-color: blue;"></div>
<script>
function alertWidth() {
var iPadMeasureWidthNode = window.iPadWNode;
if (!iPadMeasureWidthNode) {
iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
iPadMeasureWidthNode.className = 'ipad-measure-w';
document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
}
var zoominverse = 1000/Math.round(1000 * iPadMeasureWidthNode.offsetWidth/window.innerWidth);
alert(zoominverse);
}
</script>
</body>
</html>
FYI: changement de zoom sur IE6/7/8 et peut-être 9 est détecté en cherchant le changement dans screen.deviceXDPI screen.deviceYDPI dans window onresize event (juste remarqué le code - il est utile de savoir si vous en avez besoin! la mise en page en raison du changement de zoom peut forcer le relais). – robocat
Toujours sur Webkit, voir window.devicePixelRatio (valeur fixe: 1 normalement, 2 pour les écrans Retina, 1,5 ou 2 ou 2,25 pour les écrans haute densité Android) http://www.quirksmode.org/blog/archives/2012/06 /devicepixelrati.html – robocat
Pourriez-vous donner un exemple pour des valeurs très imprécises? Quelque chose lien "rapport largeur/hauteur: x/y, largeur réelle/hauteur: a/b". – Daniel
Sur un Droid X fonctionnant sous Android 2.2, largeur d'écran rapportée = 800, largeur d'écran réelle 480. Hauteur d'écran signalée = 1360, hauteur d'écran réelle = 854.Lors du rechargement de la page, hauteur d'écran signalée = 1220, hauteur réelle de l'écran encore = 854 - Peter –
Merci, c'est bizarre. Il ne semble pas avoir quelque chose à voir avec le DPI de l'appareil. – Daniel