Détection mobile et prise en charge de périphériques plus anciens

Question

Comment identifier, lorsque l'utilisateur se connecte à un site Web avec un ancien téléphone (pas les smartphones et les 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> 

site fonctionne bien avec HTC, iPhone, Nokia et ainsi de suite. Mon ami a testé avec certains Ericsson (ne connaissent pas le modèle), mais le site ne fonctionnera pas. Il montre seulement le site de PC, pas mobile.

Answer 1

Le téléphone prend-il en charge JavaScript? Sinon, vous pouvez utiliser cette solution de contournement (si elle ne l'affecte pas UX de votre site Web):

1. Créer un div conteneur, qui est tout le site la superposition
2. Tapez une description (par exemple " ce site fournit une version mobile ») et un lien
3. Masquer la div avec JavaScript si elle pas un appareil mobile ou un pris en charge un

Answer 2

C'est quelque chose que j'utilise dans mon code pour vérifier les mobiles

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

Fondamentalement, vous vérifiez les res d'écran du client. Si c'est vraiment bas, vous redirigez simplement vers le mobile. vous pouvez changer les paramètres pour être plus petit si vous le souhaitez.

Answer 3

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

1. Navigateur pris en charge par la Communauté Renifler WURFL project
2. navigateur personnalisé sniffing (ce que vous faites maintenant, assez courant mais pas considéré comme une meilleure pratique)
3. grâce au soutien de détection caractéristique.

Option 1: Est-ce que probablement vous obtenir le meilleur soutien général si vous cherchez vraiment à soutenir les non-smartphones. Ceci est fait sur le backend en vérifiant l'agent utilisateur par rapport à une base de données massive de périphériques connus 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 tout le monde.

Option 2: Les personnes qui ne sont pas des smartphones savent que surfer sur le Web est nul. Ils sont donc moins susceptibles de les utiliser pour 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 mentionné. Pour les sites que j'ai vus, il y avait moins de 2% sur BlackBerry 5 ou plus et moins de 1% pour tout ce qui n'était pas Android, iOS ou BlackBerry 6+. J'ai soutenu cette méthode de détection avant et voici comment je l'ai fait. Notez la tolérance pour toute option basée sur Webkit à condition que l'écran soit petit (isUnknownMobile). Il s'agit d'une tentative de vérification de l'avenir jusqu'à ce qu'une telle plate-forme puisse gagner suffisamment de place pour être invoqué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 d'objets est probablement un avenir beaucoup plus moyen imperméabilisé des tests si un client est mobile.Envisagez d'utiliser le Modernizr Project pour connaître les fonctionnalités prises en charge. Par exemple, si l'appareil a un petit écran et prend en charge le canevas, ou s'il possède une interface tactile, ils sont probablement mobiles. Encore une fois, il s'agit d'une détection basée sur le frontal et repose sur JavaScript.

Si vous cherchez vraiment à rediriger tout le monde qui est mobile, le projet WURFL est votre meilleur pari.