Comment détecter un appareil mobile avec JavaScript?
On m'a demandé de créer une page HTML/JavaScript afin de simuler la détection des appareils mobiles (iPhone/iPad/Android) à l'aide de code JavaScript. Cela mènera ensuite l'utilisateur à un autre écran qui lui demandera son adresse email.
Je sais que cette réponse a 3 ans de retard mais aucune des autres réponses sont en effet correctes à 100%. Si vous souhaitez détecter si l'utilisateur se trouve sur N'IMPORTE QUELLE forme d'appareil mobile (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), vous pouvez utiliser le code suivant:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
}
Vous devez détecter la chaîne d'agent utilisateur des navigateurs demandeurs, puis décider en fonction de sa nature, qu'elle provienne d'un navigateur mobile ou non. Cet appareil n'est pas parfait et ne le sera jamais parce que les agents utilisateurs ne sont pas standardisés pour les appareils mobiles (du moins pas à ma connaissance).
Ce site vous aidera à créer le code: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
Exemple:
Vous pouvez obtenir l'agent utilisateur en javascript en procédant comme suit:
var uagent = navigator.userAgent.toLowerCase();
Et puis faites le chèque dans le même format que celui-ci (en utilisant simplement iPhone comme exemple rapide, mais les autres auraient besoin d'être un peu différents)
function DetectIphone()
{
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
Modifier
Vous créeriez une page HTML simple comme ceci:
<html>
<head>
<title>Mobile Detection</title>
</head>
<body>
<input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
</body>
</html>
<script>
function DetectIphone()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
</script>
Une solution assez simple consiste à vérifier la largeur de l'écran. Étant donné que presque tous les appareils mobiles ont une largeur d'écran maximale de 480 pixels (à l'heure actuelle), c'est assez fiable:
if( screen.width <= 480 ) {
location.href = '/mobile.html';
}
La chaîne user-agent est aussi un endroit à regarder. Cependant, la solution précédente est toujours meilleure car même si un périphérique paniqué ne répond pas correctement à l'agent utilisateur, la largeur de l'écran ne ment pas.
La seule exception à cette règle concerne les tablet pc, comme l'ipad. Ces appareils ont une largeur d'écran supérieure à celle des smartphones et je choisirais probablement la chaîne user-agent pour ceux-ci.
if(navigator.userAgent.match(/iPad/i)){
//code for iPad here
}
if(navigator.userAgent.match(/iPhone/i)){
//code for iPhone here
}
if(navigator.userAgent.match(/Android/i)){
//code for Android here
}
if(navigator.userAgent.match(/BlackBerry/i)){
//code for BlackBerry here
}
if(navigator.userAgent.match(/webOS/i)){
//code for webOS here
}
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null
|| screen.width <= 480;
Une solution simple pourrait être css-only. Vous pouvez définir des styles dans votre feuille de style, puis les ajuster au bas de celle-ci. Les smartphones modernes agissent comme s'ils ne faisaient que 480 pixels de large, alors qu'ils sont en réalité beaucoup plus. Le code pour détecter un écran plus petit en CSS est
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
J'espère que cela t'aides!
Puisque nous sommes en 2015, si vous tombiez sur cette question, vous devriez probablement utiliser window.matchMedia (et, si c'est toujours 2015, polyfilling pour les anciens navigateurs):
if (matchMedia('handheld').matches) {
//...
} else {
//...
}
Alors j'ai fait ça. Merci à tous!
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("Android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
</head>
<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>
</html>
J'utilise mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
Vous pouvez utiliser la chaîne user-agent pour le détecter.
var useragent = navigator.userAgent.toLowerCase();
if( useragent.search("iphone") )
; // iphone
else if( useragent.search("iPod") )
; // iPod
else if( useragent.search("Android") )
; // Android
etc
Vous pouvez trouver une liste des chaînes d’agent utilisateur ici http://www.useragentstring.com/pages/useragentstring.php
Je vous conseille de vérifier http://wurfl.io/
En un mot, si vous importez un fichier JS minuscule:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
il vous restera un objet JSON ressemblant à:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(en supposant que vous utilisiez un Nexus 7, bien sûr) et que vous pourrez faire des choses comme:
WURFL.complete_device_name
C'est ce que vous recherchez.
Disclaimer: Je travaille pour l'entreprise qui propose ce service gratuit. Merci.
Ceci est un exemple de la façon de vérifier si une page Web est chargée dans Desktop ou sur une application mobile.
JS s'exécutera au chargement de la page et vous pourrez effectuer certaines tâches spécifiques de Desktop lors du chargement de la page, par exemple masquer le lecteur de codes à barres.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/*
* Hide Scan button if Page is loaded in Desktop Browser
*/
function hideScanButtonForDesktop() {
if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {
// Hide scan button for Desktop
document.getElementById('btnLinkModelScan').style.display = "none";
}
}
//toggle scanButton for Desktop on page load
window.onload = hideScanButtonForDesktop;
</script>
</head>
Déterminez quel est l'agent utilisateur pour les périphériques que vous devez simuler, puis testez une variable par rapport à celle-ci.
par exemple:
// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent
var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
// some code here
}
Utilisez simplement DeviceDetection
deviceDetection.deviceType // phone | tablet according to device
Comme je cherchais (sans succès) la solution appropriée pour mon piratage, je voudrais néanmoins ajouter mon piratage ici: je vérifie simplement la prise en charge de l'orientation de l'appareil, ce qui semble la différence la plus significative entre les mobiles et les ordinateurs de bureau:
var is_handheld = 0; // juste un global .__ if (window.DeviceOrientationEvent) {is_handheld = 1;}
Cela étant dit, une page devrait également offrir un choix manuel entre la disposition des postes de travail et mobiles. J'ai une résolution de 1920 * 1080 et je peux effectuer un zoom avant: un bloc wordpressoïde simplifié à l'extrême et comportant peu de fonctionnalités n'est pas toujours une bonne chose. Forcer particulièrement une mise en page basée sur la détection de périphériques non fonctionnels - cela se produit tout le temps.
Une autre possibilité consiste à utiliser mobile-detect.js . Essayez la démo .
Utilisation du navigateur:
<script src="mobile-detect.js"></script>
<script>
var md = new MobileDetect(window.navigator.userAgent);
// ... see below
</script>
Node.js/Express:
var MobileDetect = require('mobile-detect'),
md = new MobileDetect(req.headers['user-agent']);
// ... see below
Exemple:
var md = new MobileDetect(
'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
' Version/4.0 Mobile Safari/534.30');
// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding
console.log( md.mobile() ); // 'Sony'
console.log( md.phone() ); // 'Sony'
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // 'Safari'
console.log( md.os() ); // 'AndroidOS'
console.log( md.is('iPhone') ); // false
console.log( md.is('bot') ); // false
console.log( md.version('Webkit') ); // 534.3
console.log( md.versionStr('Build') ); // '4.1.A.0.562'
console.log( md.match('PlayStation|xbox') ); // false
Ceci est ma version, assez similaire à la version supérieure, mais je pense bon pour la référence.
if (mob_url == "") {
lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
lt_url = mob_url;
} else {
lt_url = desk_url;
}
La détection de périphérique basée sur l'utilisateur-agent n'est pas une très bonne solution, il vaut mieux détecter des fonctionnalités telles que les périphériques tactiles (dans le nouveau jQuery, ils retirent $.browser et utilisent plutôt $.support).
Pour détecter mobile, vous pouvez vérifier les événements tactiles:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
Tiré de Quel est le meilleur moyen de détecter un périphérique à écran tactile à l'aide de JavaScript?
Semblable à plusieurs des réponses ci-dessus. Cette fonction simple fonctionne très bien pour moi. Il est courant de 2019
function IsMobileCard()
{
var check = false;
(function(a){if(/(Android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|Kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|Palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
Le test de l'agent utilisateur est complexe, complexe et échoue invariablement. Je n'ai pas non plus constaté que la correspondance des médias pour "ordinateur de poche" fonctionnait pour moi. La solution la plus simple était de détecter si la souris était disponible. Et cela peut être fait comme ça:
var result = window.matchMedia("(any-pointer:coarse)").matches;
Cela vous indiquera si vous devez afficher des éléments de survol ou non, ainsi que tout ce qui nécessite un pointeur physique. Le dimensionnement peut ensuite être effectué sur d'autres requêtes de support basées sur la largeur.
La petite bibliothèque suivante est une version avec attache de ceinture de la requête ci-dessus, qui devrait couvrir la plupart des scénarios "êtes-vous une tablette ou un téléphone sans souris".
https://patrickhlauke.github.io/touch/touchscreen-detection/
Les matchs média sont supportés depuis 2015 et vous pouvez vérifier la compatibilité ici: https://caniuse.com/#search=matchMedia
En bref, vous devez conserver les variables indiquant si l'écran est tactile et sa taille. En théorie, je pourrais avoir un petit écran sur un bureau géré par une souris.