Comment détecter un appareil mobile avec JavaScript?
on m'a demandé de créer une page HTML / JavaScript réelle pour simuler la détection des appareils mobiles (iPhone / iPad / Android) en utilisant le code JavaScript. Cela amènera l'utilisateur à un autre écran qui lui demandera son adresse e-mail.
19 réponses
je sais que cette réponse est venue 3 ans de retard mais none d'autres réponses sont en effet 100% de réponses correctes. Si vous souhaitez détecter si l'utilisateur est sur toute 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 détectez le browsers requesting user agent string, puis décidez en fonction de ce qu'il est si elle provient d'un navigateur mobile ou non. Cet appareil n'est pas parfait, et ne sera jamais due au fait 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 faisant ceci:
var uagent = navigator.userAgent.toLowerCase();
et ensuite faire la vérification dans le même format que celui-ci (juste en utilisant l'iPhone comme un exemple rapide, mais d'autres auraient besoin d'être un peu différent)
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 est de vérifier la largeur de l'écran. Puisque presque tous les appareils mobiles ont une largeur d'écran maximale de 480px (à 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 première solution est encore meilleure car même si un appareil ne répond pas correctement pour l'agent-utilisateur, la largeur de l'écran ne ment pas.
la seule exception ici sont tablettes pc comme le iPad. Ces appareils ont une largeur d'écran plus élevée que les smartphones et j'utiliserais probablement la chaîne user-agent-string pour ceux-là.
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 sur le fond de celui-ci. Les smartphones modernes agissent comme s'ils étaient seulement 480px de large, alors qu'ils sont en fait beaucoup plus. Le code pour détecter un écran plus petit dans css est
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
Espérons que cette aide!
comme nous sommes en 2015, Si vous avez rencontré cette question, vous devriez probablement utiliser la fenêtre .matchMedia (et, si elle est encore 2015, polyfilling pour les navigateurs plus anciens):
if (matchMedia('handheld').matches) {
//...
} else {
//...
}
j'utilise mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
alors j'ai fait ça. Merci à vous 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>
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 useragent ici http://www.useragentstring.com/pages/useragentstring.php
je vous conseille de vérifier http://wurfl.io /
en un mot, si vous importez un petit fichier JS:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
il vous restera un objet JSON qui ressemble à:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(en supposant que vous utilisez un Nexus 7, Bien sûr) et vous serez en mesure de faire des choses comme:
WURFL.complete_device_name
C'est ce que vous cherchez.
Clause De Non-Responsabilité: I travailler pour l'entreprise qui propose ce service gratuit. Grâce.
déterminez ce qu'est L'agent utilisateur pour les appareils que vous devez simuler et ensuite tester une variable par rapport à cela.
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
}
ceci est un exemple de la façon de vérifier si la page web est chargée dans le bureau ou l'application mobile.
JS s'exécutera sur la charge de page et vous pouvez faire des choses spécifiques de bureau sur la charge de page par exemple cacher le scanner de code à 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>
C'est ma version, assez similaire à la version supérieure, mais je pense que c'est une bonne 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;
}
du site du développeur mozilla: spécifique à l'Appareil les Chaînes d'Agent Utilisateur
je trouve que c'est un peu plus" précis " quand on filtre spécifiquement pour les appareils mobiles.
détection de périphérique basée sur l'utilisateur-agent n'est pas une très bonne solution, mieux est de détecter les caractéristiques comme l'appareil tactile (dans le nouveau jQuery, ils suppriment $.browser et utiliser $.support à la place).
pour détecter mobile, vous pouvez vérifier les événements touch:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
tiré de Quelle est la meilleure façon de détecter un appareil à "écran tactile" en utilisant JavaScript?
Simplement utiliser DeviceDetection
deviceDetection.deviceType // phone | tablet according to device
une autre possibilité est d'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
comme je (sorte de sans succès) ai cherché la bonne solution pour mon hack, je veux ajouter mon hack ici néanmoins: je vérifie tout simplement le soutien de l'orientation de l'appareil, qui semble la plus importante différence entre les mobiles et le bureau:
var is_handheld=0; // juste un mondial si(fenêtre.DeviceOrientationEvent) {is_handheld=1;}
cela dit, une page imho doit également offrir un choix manuel entre la mise en page mobile / bureau. J'ai eu 1920*1080 et je peux faire un zoom - une trop simplifiée et réduite wordpressoid morceau n'est pas toujours une bonne chose. En particulier forcer une disposition basée sur la détection d'un dispositif non fonctionnel - cela arrive tout le temps.