web-dev-qa-db-fra.com

Obtenir une résolution d'écran sur un site Web mobile

Je conçois un site Web mobile comportant une section permettant de télécharger des fonds d'écran. Pour pouvoir accueillir de nombreux utilisateurs, je souhaite permettre de télécharger un fond d'écran basé sur la résolution de l'écran. Je souhaite détecter la résolution de JavaScript et afficher le fond d'écran approprié.

C'est ce que j'ai trouvé en ligne et que xD a échoué:

width  = window.innerWidth  || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;

Pour mon SGS3, qui a la résolution 720x1280, je reçois le 360x567.

Comment découvrir la résolution du téléphone à partir de JavaScript?

javascriptmobile
9
Banana

Vous pouvez peut-être utiliser l'objet screen:

var w = screen.width;
var h = screen.height;

Mise à jour - Essayez de l'utiliser avec le window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
31
user1693593

Ken Fyrstenberg, très bien, merci. Je cherchais un moyen simple de détecter toutes les données de résolution et de taille d'écran possibles et, pour répondre à la question de savoir à quoi sert le rapport, il vous permet de voir s'il s'agit par exemple d'un périphérique haute résolution de type écran rétina.

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch

combiné avec les tests tactiles vérifier ce connexe SO :

Je peux avoir une très bonne idée des caractéristiques de l'écran/du toucher des appareils que nos vrais utilisateurs utilisent.

pour les contenus Web, bien sûr, ce qui vous intéresse vraiment est la taille de la fenêtre interne du navigateur, l’espace qui vous est alloué sur le périphérique. En passant, j’ai déjà vu que les appareils Apple semblaient toujours donner les dimensions du mode portrait, par exemple, 768 x 1024 pour un iPad sans affichage à rétine, ce qui est un peu gênant car j’espérais aussi apprendre comment la plupart des utilisateurs interagissez avec le Web et notre site.

Android semble donner la largeur/hauteur réelle de ce moment, c’est-à-dire la largeur/hauteur d’un paysage ou d’un portrait.

Par exemple:

var ratio = window.devicePixelRatio || 1;
var is_touch_device = 'ontouchstart' in document.documentElement;
var touch_status = (is_touch_device) ? 'touch' : 'no-touch';
touch_status = ' ts:' + touch_status;
var width_height = 'wh:' + screen.width + 'x' + screen.height;
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight;
var rw = screen.width * ratio;
var rh = screen.height * ratio;
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh;
var data_string = width_height + client_width_height + ratio_width_height + touch_status;

Cela crée beaucoup de données sur le système client que vous pouvez ensuite transmettre à quelque chose en utilisant la méthode de votre choix.

UPDATE: Cette méthode n'a pris que quelques minutes pour trouver comment les appareils Apple signalent réellement leur largeur/hauteur:

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile

Comme vous pouvez le constater, la méthode document.documentElement.clientWidth indique la largeur réelle si portrait/paysage, ce qui est bien.

3
Lizardx

Cela fonctionnera dans appareil mobile aussi 

screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;
2
Jan Dürrer

Vous pouvez utiliser window.screen.width et window.screen.height pour détecter la résolution d'écran du périphérique.

0
Strille