web-dev-qa-db-fra.com

Comment détecter un navigateur mobile pour la taille de l'écran?

Je travaille sur un site qui doit fonctionner sur les ordinateurs de bureau et mobiles. À l'heure actuelle, j'ai une div de contenu principal qui est définie à 70% de la largeur de l'écran. Cependant, j'estime que c'est trop petit pour les appareils mobiles (comme les téléphones, pas tellement les tablettes) et que je veux passer à 90 ou 95%. Comment puis-je faire cela (par exemple, pour des tailles d'écran inférieures à 5 pouces) sans utiliser terriblement peu fiable navigateur reniflant? J'entends le mantra "détection de fonctionnalité de détection de fonctionnalité" encore et encore, et je comprends pourquoi c'est une bonne chose ... mais je ne sais pas quelle "fonctionnalité" détecter pour ce problème ...

Merci.

javascriptjquerymobiledetect
11
Esaevian

Vous pouvez utiliser CSS:

@media screen and (max-width:500px) {
  /* smaller screens */
}

@media screen and (max-width:960px) {
  /* bigger screens */
}
6
Neal

Vous pouvez obtenir une approximation sauvage de la taille de l'écran avec un peu de javascript.

function getScreenSizeInches() {    
    var temp =  document.createElement("div")
    temp.style.overflow='hidden';
    temp.style.visibility='hidden';
    document.body.appendChild(temp)
    temp.style.width = "10in"
    var dpi = temp.offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

Voir les violons suivants pour son utilisation en action vanillajs ou jquery ..

version jQuery:

function getScreenSizeInches() {    
    var $temp =  $('<div style="overflow:hidden;visibility:hidden;width:10in"/>').appendTo('body'),
       dpi = $temp[0].offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

Comme il a été souligné dans les commentaires, cette technique peut être extrêmement imprécise et je ne l'utiliserais donc pas autrement que comme un indice de la taille de l'écran ...

2
Kris Erickson

Vous pouvez utiliser CSS:

/*Here goes the CSS for all screens*/

@media handheld {

    /*Here goes the CSS for mobile phones and tablets*/

}

EDIT:

Une autre suggestion:

définir la métabalise viewport dans votre html:

<meta name="viewport" content="width=device-width, height=device-height" />

vous pouvez maintenant obtenir les dimensions suivantes: Obtenir les dimensions de la fenêtre du navigateur avec JavaScript

1
s3lph

Au lieu d'utiliser jquery, vous pouvez utiliser du javascript simple pour le détecter:

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

}

ou vous pouvez combiner les deux pour le rendre plus accessible via jQuery ...

$.browser.device = (/Android|webos|iphone|ipad|iPod|blackberry/i.test(navigator.userAgent.toLowerCase()));

maintenant $ .browser retournera "device" pour tous les périphériques ci-dessus

0
pixelbyaj