Détection mobile
Existe-t-il un moyen de détecter les appareils mobiles à l'aide de Javascript? Aussi, j'ai recherché qu'il existe un tel XML qui contient des agents utilisateurs qui pourraient aider à identifier les combinés mobiles.
Vous avez probablement un site normal et vous souhaitez rediriger vers un site mobile si certaines conditions sont remplies, comme l'écran est très petit, ou le contenu est dézoomé pour tenir sur un grand écran "virtuel" dans un petit espace physique. Alors, pourquoi ne pas vérifier ces conditions au lieu de tester un zillion de chaînes UA.
Essayez quelque chose comme ceci:
Pour que l'AU signale la taille physique des pixels de l'écran, cette balise doit être présente dans la page html. *
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
Maintenant, obtenez simplement la taille de l'écran et redirigez si nécessaire. Utilisez un léger retard. **
setTimeout(function(){
if ((screen.width < 480) || (screen.height < 480)) {
location.replace('/mobile/');
}
}, 100);
C'est à peu près ça. Étant donné que cette page a déjà la balise viewport configurée pour mobile, vous pouvez également faire l'inverse, afficher mobile ici et rediriger vers le site complet si l'écran est plus grand.
Edit: je ne sais pas pourquoi cette question a été fermée; pour autant que je sache, il correspond au format SO assez bien. Voté pour rouvrir.
* L'insérer avec javascript ne semble pas fonctionner (quelqu'un doit me corriger si vous trouvez un moyen). S'il n'est pas présent, le téléphone signalera une taille d'écran virtuelle plus grande que l'écran réel. Il ne semble pas non plus fonctionner dans les iframes, uniquement dans les fenêtres de niveau supérieur (ce qui est logique car les iframes devront être mis à l'échelle de la même manière que la fenêtre externe, ils partagent la même fenêtre).
** Certains navigateurs mobiles conservent la taille de la fenêtre d'affichage depuis la dernière page chargée, ils signalent donc une grande taille d'écran virtuel pendant quelques millisecondes, jusqu'à ce qu'ils remarquent la balise META, je suppose. Je n'ai pas pu trouver un événement précoce pour y accrocher, veuillez commenter si vous avez une meilleure façon de le faire. Un retard de 50 ms a bien fonctionné dans tous mes tests, 100 devraient être principalement sûrs.
J'ai ce code de K2F, il est en PHP , vous devrez le convertir en javascript.
Ça ne devrait pas être trop compliqué. La connaissance des constantes (bits de texte) devrait vous aider beaucoup.
/**
* A simple class used to detect whether page<br>
* is being viewed from a mobile device or not.
* @copyright 2010 Covac Software
* @author Christian Sciberras
* @version 01/05/2010
*/
class Mobile {
public static function is_mobile(){
$user_agent = $_SERVER['HTTP_USER_AGENT']; // get the user agent value - this should be cleaned to ensure no nefarious input gets executed
$accept = $_SERVER['HTTP_ACCEPT']; // get the content accept value - this should be cleaned to ensure no nefarious input gets executed
return false
|| (preg_match('/ipad/i',$user_agent))
|| (preg_match('/iPod/i',$user_agent)||preg_match('/iphone/i',$user_agent))
|| (preg_match('/Android/i',$user_agent))
|| (preg_match('/opera mini/i',$user_agent))
|| (preg_match('/blackberry/i',$user_agent))
|| (preg_match('/(pre\/|Palm os|Palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i',$user_agent))
|| (preg_match('/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent))
|| (preg_match('/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|Motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|Kindle|mobile|psp|treo)/i',$user_agent))
|| ((strpos($accept,'text/vnd.wap.wml')>0)||(strpos($accept,'application/vnd.wap.xhtml+xml')>0))
|| (isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE']))
|| (in_array(strtolower(substr($user_agent,0,4)),array('1207'=>'1207','3gso'=>'3gso','4thp'=>'4thp','501i'=>'501i','502i'=>'502i','503i'=>'503i','504i'=>'504i','505i'=>'505i','506i'=>'506i','6310'=>'6310','6590'=>'6590','770s'=>'770s','802s'=>'802s','a wa'=>'a wa','Acer'=>'Acer','acs-'=>'acs-','airn'=>'airn','alav'=>'alav','asus'=>'asus','attw'=>'attw','au-m'=>'au-m','aur '=>'aur ','aus '=>'aus ','abac'=>'abac','acoo'=>'acoo','aiko'=>'aiko','alco'=>'alco','alca'=>'alca','amoi'=>'amoi','anex'=>'anex','anny'=>'anny','anyw'=>'anyw','aptu'=>'aptu','Arch'=>'Arch','argo'=>'argo','bell'=>'bell','bird'=>'bird','bw-n'=>'bw-n','bw-u'=>'bw-u','beck'=>'beck','benq'=>'benq','bilb'=>'bilb','blac'=>'blac','c55/'=>'c55/','cdm-'=>'cdm-','chtm'=>'chtm','capi'=>'capi','cond'=>'cond','craw'=>'craw','dall'=>'dall','dbte'=>'dbte','dc-s'=>'dc-s','dica'=>'dica','ds-d'=>'ds-d','ds12'=>'ds12','dait'=>'dait','devi'=>'devi','dmob'=>'dmob','doco'=>'doco','dopo'=>'dopo','el49'=>'el49','erk0'=>'erk0','esl8'=>'esl8','ez40'=>'ez40','ez60'=>'ez60','ez70'=>'ez70','ezos'=>'ezos','ezze'=>'ezze','elai'=>'elai','emul'=>'emul','eric'=>'eric','ezwa'=>'ezwa','fake'=>'fake','fly-'=>'fly-','fly_'=>'fly_','g-mo'=>'g-mo','g1 u'=>'g1 u','g560'=>'g560','gf-5'=>'gf-5','grun'=>'grun','gene'=>'gene','go.w'=>'go.w','good'=>'good','grad'=>'grad','hcit'=>'hcit','hd-m'=>'hd-m','hd-p'=>'hd-p','hd-t'=>'hd-t','hei-'=>'hei-','hp i'=>'hp i','hpip'=>'hpip','hs-c'=>'hs-c','htc '=>'htc ','htc-'=>'htc-','htca'=>'htca','htcg'=>'htcg','htcp'=>'htcp','htcs'=>'htcs','htct'=>'htct','htc_'=>'htc_','haie'=>'haie','hita'=>'hita','huaw'=>'huaw','hutc'=>'hutc','i-20'=>'i-20','i-go'=>'i-go','i-ma'=>'i-ma','i230'=>'i230','iac'=>'iac','iac-'=>'iac-','iac/'=>'iac/','ig01'=>'ig01','im1k'=>'im1k','inno'=>'inno','iris'=>'iris','jata'=>'jata','Java'=>'Java','kddi'=>'kddi','kgt'=>'kgt','kgt/'=>'kgt/','kpt '=>'kpt ','kwc-'=>'kwc-','klon'=>'klon','lexi'=>'lexi','lg g'=>'lg g','lg-a'=>'lg-a','lg-b'=>'lg-b','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-f'=>'lg-f','lg-g'=>'lg-g','lg-k'=>'lg-k','lg-l'=>'lg-l','lg-m'=>'lg-m','lg-o'=>'lg-o','lg-p'=>'lg-p','lg-s'=>'lg-s','lg-t'=>'lg-t','lg-u'=>'lg-u','lg-w'=>'lg-w','lg/k'=>'lg/k','lg/l'=>'lg/l','lg/u'=>'lg/u','lg50'=>'lg50','lg54'=>'lg54','lge-'=>'lge-','lge/'=>'lge/','lynx'=>'lynx','leno'=>'leno','m1-w'=>'m1-w','m3ga'=>'m3ga','m50/'=>'m50/','maui'=>'maui','mc01'=>'mc01','mc21'=>'mc21','mcca'=>'mcca','medi'=>'medi','meri'=>'meri','mio8'=>'mio8','mioa'=>'mioa','mo01'=>'mo01','mo02'=>'mo02','mode'=>'mode','modo'=>'modo','mot '=>'mot ','mot-'=>'mot-','mt50'=>'mt50','mtp1'=>'mtp1','mtv '=>'mtv ','mate'=>'mate','maxo'=>'maxo','merc'=>'merc','mits'=>'mits','mobi'=>'mobi','motv'=>'motv','mozz'=>'mozz','n100'=>'n100','n101'=>'n101','n102'=>'n102','n202'=>'n202','n203'=>'n203','n300'=>'n300','n302'=>'n302','n500'=>'n500','n502'=>'n502','n505'=>'n505','n700'=>'n700','n701'=>'n701','n710'=>'n710','nec-'=>'nec-','nem-'=>'nem-','newg'=>'newg','neon'=>'neon','netf'=>'netf','noki'=>'noki','nzph'=>'nzph','o2 x'=>'o2 x','o2-x'=>'o2-x','opwv'=>'opwv','owg1'=>'owg1','opti'=>'opti','oran'=>'oran','p800'=>'p800','pand'=>'pand','pg-1'=>'pg-1','pg-2'=>'pg-2','pg-3'=>'pg-3','pg-6'=>'pg-6','pg-8'=>'pg-8','pg-c'=>'pg-c','pg13'=>'pg13','phil'=>'phil','pn-2'=>'pn-2','pt-g'=>'pt-g','Palm'=>'Palm','pana'=>'pana','pire'=>'pire','pock'=>'pock','pose'=>'pose','psio'=>'psio','qa-a'=>'qa-a','qc-2'=>'qc-2','qc-3'=>'qc-3','qc-5'=>'qc-5','qc-7'=>'qc-7','qc07'=>'qc07','qc12'=>'qc12','qc21'=>'qc21','qc32'=>'qc32','qc60'=>'qc60','qci-'=>'qci-','qwap'=>'qwap','qtek'=>'qtek','r380'=>'r380','r600'=>'r600','raks'=>'raks','rim9'=>'rim9','rove'=>'rove','s55/'=>'s55/','sage'=>'sage','sams'=>'sams','sc01'=>'sc01','sch-'=>'sch-','scp-'=>'scp-','sdk/'=>'sdk/','se47'=>'se47','sec-'=>'sec-','sec0'=>'sec0','sec1'=>'sec1','semc'=>'semc','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','sk-0'=>'sk-0','sl45'=>'sl45','slid'=>'slid','smb3'=>'smb3','smt5'=>'smt5','sp01'=>'sp01','sph-'=>'sph-','spv '=>'spv ','spv-'=>'spv-','sy01'=>'sy01','samm'=>'samm','sany'=>'sany','sava'=>'sava','scoo'=>'scoo','send'=>'send','siem'=>'siem','smar'=>'smar','smit'=>'smit','soft'=>'soft','sony'=>'sony','t-mo'=>'t-mo','t218'=>'t218','t250'=>'t250','t600'=>'t600','t610'=>'t610','t618'=>'t618','tcl-'=>'tcl-','tdg-'=>'tdg-','telm'=>'telm','tim-'=>'tim-','ts70'=>'ts70','tsm-'=>'tsm-','tsm3'=>'tsm3','tsm5'=>'tsm5','tx-9'=>'tx-9','tagt'=>'tagt','talk'=>'talk','teli'=>'teli','topl'=>'topl','hiba'=>'hiba','up.b'=>'up.b','upg1'=>'upg1','utst'=>'utst','v400'=>'v400','v750'=>'v750','veri'=>'veri','vk-v'=>'vk-v','vk40'=>'vk40','vk50'=>'vk50','vk52'=>'vk52','vk53'=>'vk53','vm40'=>'vm40','vx98'=>'vx98','virg'=>'virg','vite'=>'vite','voda'=>'voda','vulc'=>'vulc','w3c '=>'w3c ','w3c-'=>'w3c-','wapj'=>'wapj','wapp'=>'wapp','wapu'=>'wapu','wapm'=>'wapm','wig '=>'wig ','wapi'=>'wapi','wapr'=>'wapr','wapv'=>'wapv','wapy'=>'wapy','wapa'=>'wapa','waps'=>'waps','wapt'=>'wapt','winc'=>'winc','winw'=>'winw','wonu'=>'wonu','x700'=>'x700','xda2'=>'xda2','xdag'=>'xdag','yas-'=>'yas-','your'=>'your','zte-'=>'zte-','zeto'=>'zeto','acs-'=>'acs-','alav'=>'alav','alca'=>'alca','amoi'=>'amoi','aste'=>'aste','audi'=>'audi','avan'=>'avan','benq'=>'benq','bird'=>'bird','blac'=>'blac','blaz'=>'blaz','brew'=>'brew','brvw'=>'brvw','bumb'=>'bumb','ccwa'=>'ccwa','cell'=>'cell','cldc'=>'cldc','cmd-'=>'cmd-','dang'=>'dang','doco'=>'doco','eml2'=>'eml2','eric'=>'eric','fetc'=>'fetc','hipt'=>'hipt','http'=>'http','ibro'=>'ibro','idea'=>'idea','ikom'=>'ikom','inno'=>'inno','ipaq'=>'ipaq','jbro'=>'jbro','jemu'=>'jemu','Java'=>'Java','jigs'=>'jigs','kddi'=>'kddi','keji'=>'keji','kyoc'=>'kyoc','kyok'=>'kyok','leno'=>'leno','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-g'=>'lg-g','lge-'=>'lge-','libw'=>'libw','m-cr'=>'m-cr','maui'=>'maui','maxo'=>'maxo','midp'=>'midp','mits'=>'mits','mmef'=>'mmef','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','mwbp'=>'mwbp','mywa'=>'mywa','nec-'=>'nec-','newt'=>'newt','nok6'=>'nok6','noki'=>'noki','o2im'=>'o2im','opwv'=>'opwv','Palm'=>'Palm','pana'=>'pana','pant'=>'pant','pdxg'=>'pdxg','phil'=>'phil','play'=>'play','pluc'=>'pluc','port'=>'port','prox'=>'prox','qtek'=>'qtek','qwap'=>'qwap','rozo'=>'rozo','sage'=>'sage','sama'=>'sama','sams'=>'sams','sany'=>'sany','sch-'=>'sch-','sec-'=>'sec-','send'=>'send','seri'=>'seri','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','siem'=>'siem','smal'=>'smal','smar'=>'smar','sony'=>'sony','sph-'=>'sph-','symb'=>'symb','t-mo'=>'t-mo','teli'=>'teli','tim-'=>'tim-','tosh'=>'tosh','treo'=>'treo','tsm-'=>'tsm-','upg1'=>'upg1','upsi'=>'upsi','vk-v'=>'vk-v','voda'=>'voda','vx52'=>'vx52','vx53'=>'vx53','vx60'=>'vx60','vx61'=>'vx61','vx70'=>'vx70','vx80'=>'vx80','vx81'=>'vx81','vx83'=>'vx83','vx85'=>'vx85','wap-'=>'wap-','wapa'=>'wapa','wapi'=>'wapi','wapp'=>'wapp','wapr'=>'wapr','webc'=>'webc','whit'=>'whit','winw'=>'winw','wmlb'=>'wmlb','xda-'=>'xda-',)))
;
}
}
J'ai écrit un script JS appelé " redirection_mobile.js " pour résoudre ce problème. Il détecte l'agent utilisateur et redirige vers une version mobile si vous accédez à un site à partir d'un appareil mobile.
Dans certains cas, vous souhaitez rediriger d'un appareil mobile vers une version de bureau (comme avec un lien "Aller sur le site principal"), le script s'en occupera et une fois votre session terminée, vous accéderez à nouveau à la version mobile .
Vous pouvez trouver le code source sur github ici https://github.com/sebarmeli/JS-Redirection-Mobile-Site et vous pouvez lire plus de détails dans l'un de mes articles ici:
Le tout dernier endroit où je recommande le code reniflant le navigateur est mobile. C'est l'ouest sauvage là-bas en ce moment et personne ne lit le même livre de règles. J'ai entendu des rumeurs selon lesquelles certains navigateurs imitent d'autres agents utilisateurs pour éviter de renifler du code qui les exclut tout comme IE utilisé pour sauvegarder dans les années 90.
Testez par méthode et amélioration progressive de Google si vous ne savez pas déjà ce que cela signifie. Certaines implémentations de navigateur de JS sont tellement foirées qu'elles ne valent pas la peine d'être adaptées et devraient recevoir des versions d'un site qui fonctionnent sans JS, IMO.
Regardez simplement ce que l'équipe de base de JQuery considère de classe C (ne vaut pas la peine d'être pris en charge) sur leurs tables de compatibilité graduées. Et oui, je crois que cela s'applique à la fois au noyau et à la bibliothèque mobile JQ (qui est un peu comme JQ ui pour mobile, pas JQ core pour mobile - a encore besoin de noyau pour fonctionner).
J'ai publié la dernière version de "Apache Mobile Filter", ce projet open source a dans les 8 premiers mois, plus de 1100 téléchargements depuis sourceforge et je suppose la même chose depuis CPAN.
Le filtre mobile Apache vous permet d'accéder à WURFL à partir de n'importe quel langage de programmation, pas seulement Java et php qui est traditionnellement utilisé pour les sites Web mobiles dynamiques.
Le module détecte l'appareil mobile et transmet les capacités WURFL à l'autre application Web en tant que variables d'environnement. Il peut également être utilisé pour redimensionner des images à la volée pour s'adapter à la taille de l'écran de l'appareil mobile.
Essayez-le et faites-moi connaître votre opinion.
Pour plus d'informations: http://www.idelfuschini.it/it/Apache-mobile-filter-v2x.html
http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
var deviceBB = "blackberry";
//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
//************************** // Detects if the current browser is a BlackBerry of some sort.
function DetectBlackBerry() {
if (uagent.search(deviceBB) > -1)
return true; else
return false;
}
Voici un Javascript de détection mobile que je peux garantir de très bien fonctionner même avec des clients légers comme Opera MIni (avertissement: je l'ai écrit):
Branchez Détection du combiné . Vous pouvez utiliser Javascript, PHP ou les langages de script les plus populaires. Nous traitons la douleur afin que vous n'ayez pas à :-) Clause de non-responsabilité - je travaille là-bas.
Je ne recommanderais pas d'utiliser Javascript pour détecter les appareils mobiles pour la simple raison que beaucoup d'entre eux ne prennent pas en charge Javascript, donc votre code de détection n'est pas garanti pour fonctionner sur tous les appareils.
Habituellement, la détection se fait côté serveur en utilisant un fichier descripteur comme WURFL qui vous aidera non seulement à détecter les différents agents utilisateurs mobiles, mais aussi leurs capacités, tailles d'écran, profondeurs de couleurs, etc. De cette façon, vous pouvez servir une configuration différente des ressources (fichiers javascript, tailles d'image, etc.) en fonction de l'appareil mobile.