Détecter pc, smartphone, tablette et orientation en javascript avec device.js




 

Dans l’article Différencier pc, smartphone ou tablette en javascript, j’ai montré un moyen pour différencier un pc, d’un smartphone ou d’une tablette. Je vous propose dans cet article de le faire d’une autre manière et plus simplement par la biais de la librairie device.js.

 

Télechargement

Téléchargez le fichier device.js ici
Ou ici

 

Intégration

Créez un fichier html nommé testDevice.html.

Pour y intégrer la librairie device.js en supposant que le fichier est à la racine de votre site web, il suffit d’ajouter à votre page web :

<script src="device.js"></script>
<html>
 <script src="device.js"></script>
 <body>
 </body>
</html>

 

Ce qui est détectable

La librairie met à disposition un objet device ayant une série de méthodes renvoyant toutes une valeur booléenne (true/false).

Grâce à ces méthodes, il est possible de détecter :
– un type de téléphone ou tablette et par extension un PC;
– le système d’exploitation (androis, ios, windows, firefox, blackberry);
– l’orientation.

L’orientation

device.portrait()
device.landscape();

Mobile ou tablette

device.mobile();
device.tablet();

Plus finement pour Apple

device.ios();
device.ipad();
device.ipod();
device.iphone();

Plus finement pour android

device.android();
device.androidTablet();
device.androidPhone();

Plus finement pour windows

device.windows();
device.windowsTablet();
device.windowsPhone();

Plus finement pour blackberry

device.blackberry();
device.blackberryTablet();
device.blackberryPhone();

Plus finement pour firefox OS

device.fxos();
device.fxosTablet();
device.fxosPhone();

 

Exemple

<html>
 <script src="device.min.js"></script>
 <script>
  window.onload = function() {
      console.log("portrait ->" + device.portrait());
      console.log("paysage ->" + device.landscape());

      console.log("mobile ->" + device.mobile());
      console.log("tablette ->" + device.tablet());

      console.log("ios ->" + device.ios());
      console.log("ipad ->" + device.ipad());
      console.log("ipod ->" + device.ipod());
      console.log("iphone ->" + device.iphone());

      console.log("android ->" + device.android());
      console.log("android tablette ->" + device.androidTablet());
      console.log("android phone ->" + device.androidPhone());

      console.log("blackberry ->" + device.blackberry());
      console.log("blackberry tablette ->" + device.blackberryTablet());
      console.log("blackberry phone ->" + device.blackberryPhone());

      console.log("firefox ->" + device.fxos());
      console.log("firefox tablette->" + device.fxosTablet());
      console.log("firefox phone->" + device.fxosPhone());

      console.log("windows ->" + device.windows());
      console.log("windows tablette->" + device.windowsTablet());
      console.log("windows phone ->" + device.windowsPhone());

      if ( device.mobile() ) {
          document.getElementById("mobile").style.display = "block";
      } else if ( device.tablet() ) {
          document.getElementById("tablette").style.display = "block";
      } else {
          document.getElementById("pc").style.display = "block";
      }

      if ( device.portrait() ) {
          document.getElementById("portrait").style.display = "block";
      } else if ( device.landscape() ) {
          document.getElementById("paysage").style.display = "block";
      }
  }
 </script>
<body>
 <div id="typeMedia">
  <div id="mobile" style="display: none;font-size:50px;">MOBILE</div>
  <div id="tablette" style="display: none;font-size:50px;">TABLETTE</div>
  <div id="pc" style="display: none;font-size:50px;">PC</div>
 </div>
 <div id="orientationMedia">
  <div id="portrait" style="display: none;font-size:50px;">PORTRAIT</div>
  <div id="paysage" style="display: none;font-size:50px;">PAYSAGE</div>
 </div>
</body>
</html>

 

Tester

Faites les tests depuis un smartphone, une tablette et un PC.
Pour tester en live, cliquez ici.

 

J’ai constaté par différents tests que l’orientation sur un PC n’est pas correctement détectée. En soi, ce n’est pas un problème, puisque les PC sont sauf exception en orientation paysage. Je n’ai pas constaté ce problème sur smartphone et tablette.
Pour des raisons de fiabilité, la solution proposée dans l’article me semble meilleure.

 

Posté dans html5Taggé detection orientation, detection smartphone, detection tablette, HTML5, javascript  |  3 commentaires

3 réponses à "Détecter pc, smartphone, tablette et orientation en javascript avec device.js"

Répondre

*