Détection des mobiles et prise en charge des appareils plus anciens

Question

Comment identifier un utilisateur qui arrive sur un site web avec un téléphone plus ancien (pas de smartphones ou d'iPhones). J'utilise jQuery-Mobile avec Joomla 1.7.

J'utilise ce script :

<script type="text/javascript">// <![CDATA[  
var mobile = (/acer|alcatel|audiovox|avantgo|blazer|cdm|digital paths|elaine|epoc|handspring|iemobile|kyocera|lg|midp|mmp|mobile|motorola|nec|o2|openwave|opera mini|operamini|opwv|palm|panasonic|pda|phone|playstation portable|pocket|psp|qci|sagem|sanyo|sec|sendo|sharp|smartphone|symbian|telit|tsm|up-browser|up.browser|up.link|vodafone|wap|windows ce|xiino|ericsson|sonyericsson|iphone|ipod|android|blackberry|samsung|nokia|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
if (mobile) {  
    document.location = "http://mysite,com/mobile";  
}  
// ]]></script>

Le site fonctionne bien avec HTC, iPhone, Nokia, etc. Mon ami a testé avec un Ericsson (je ne connais pas le modèle), mais le site ne fonctionne pas. Il n'affiche que le site PC, pas le site mobile.

Answer 1

Voici 3 façons de détecter les...

1. Reniflage de navigateur soutenu par la communauté grâce à l'application Projet WURFL
2. Reniflage personnalisé du navigateur (ce que vous faites actuellement, assez courant mais pas considéré comme une bonne pratique)
3. Détection par le biais d'un support de fonctionnalité.

Option 1 : Vous obtiendrez probablement la meilleure prise en charge globale si vous souhaitez vraiment prendre en charge des appareils autres que des smartphones. Cela se fait en arrière-plan en vérifiant l'agent utilisateur par rapport à une base de données massive d'appareils connus qui est régulièrement mise à jour par la communauté. Comme il ne s'appuie pas sur JavaScript, c'est probablement le meilleur moyen de prendre en charge absolument tout le monde.

Option 2 : Les utilisateurs de téléphones non intelligents savent que surfer sur le web avec leur téléphone n'est pas une bonne chose. Ils sont donc moins enclins à les utiliser pour surfer sur le web. En pourcentage du trafic, le pourcentage de personnes que vous manquerez en utilisant la détection en JavaScript ne vaut probablement pas la peine d'être évoqué. Pour les sites que j'ai vus, ce pourcentage est inférieur à 2 % pour les BlackBerry 5 ou plus anciens et inférieur à 1 % pour tout ce qui n'est pas Android, iOS ou BlackBerry 6+. J'ai déjà soutenu cette méthode de détection et voici comment je l'ai fait. Notez la prise en compte de toute option basée sur webkit à condition que l'écran soit petit (isUnknownMobile). Il s'agit d'une tentative de prévention jusqu'à ce qu'une telle plateforme gagne suffisamment de terrain pour être identifiée.

<script>
    var agent = navigator.userAgent; 
    var isWebkit = (agent.indexOf("AppleWebKit") > 0);
    var isIPad = (agent.indexOf("iPad") > 0);
    var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
    var isAndroid = (agent.indexOf("Android")  > 0);
    var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
    var isWebOS = (agent.indexOf("webOS") > 0);
    var isWindowsMobile = (agent.indexOf("Windows Phone OS") > 0);
    var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
    var isUnknownMobile = (isWebkit && isSmallScreen);
    var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
    var isTablet = (isIPad || (isMobile && !isSmallScreen));
    function mobileRedirect(mobileView){location.replace((mobileView)?mobileView:"/mobile/index.jsp");}
</script>

Option 3 : La détection des fonctionnalités est probablement un moyen beaucoup plus sûr de tester si un client est mobile. Envisagez d'utiliser l'outil Projet Modernizr pour savoir quelles sont les fonctionnalités prises en charge. Par exemple, si l'appareil a un petit écran et prend en charge le canevas, ou s'il a une interface tactile, il s'agit probablement d'un appareil mobile. Là encore, il s'agit d'une détection frontale qui s'appuie sur JavaScript.

Si vous cherchez vraiment à rediriger TOUS ceux qui sont mobiles, le projet WURFL est votre meilleur choix.

Answer 2

Le téléphone prend-il en charge JavaScript ? Si ce n'est pas le cas, vous pouvez utiliser cette solution de contournement (si cela n'affecte pas l'interface utilisateur de votre site web) :

1. Créer une div-container, qui recouvre l'ensemble du site
2. Saisissez une description (par exemple, "Ce site propose une version mobile") et un lien.
3. Cacher la div avec JavaScript s'il ne s'agit pas d'un appareil mobile ou d'un appareil supporté

Answer 3

C'est ce que j'utilise dans mon code pour vérifier la présence de téléphones portables.

  function checkScreen()
  {
    if (screen.width <= 1000 && screen.height <= 1000)
      window.location.replace("MobileURL");
    else
      window.location.replace("URL");
  }

En principe, vous vérifiez la résolution de l'écran du client. Si elle est très basse, vous redirigez simplement vers le mobile. Vous pouvez changer les paramètres pour un écran plus petit si vous le souhaitez.