Rilevamento automatico del browser mobile (tramite user-agent?) [Chiuso]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come posso rilevare se un utente sta visualizzando il mio sito Web da un browser Web mobile in modo da poter rilevare automaticamente e visualizzare la versione appropriata del mio sito Web?
Soluzione
Sì, leggere l'intestazione User-Agent farà il trucco.
Ci sono alcuni elenchi fuori da agenti utenti mobili noti, quindi non è necessario ricominciare da capo. Quello che ho fatto quando ho dovuto è stato quello di creare un database di agenti utente noti e archiviare gli sconosciuti quando vengono rilevati per la revisione e quindi capire manualmente cosa sono. Quest'ultima cosa potrebbe essere eccessiva in alcuni casi.
Se vuoi farlo a livello di Apache, puoi creare uno script che genera periodicamente una serie di regole di riscrittura controllando l'agente utente (o solo una volta e dimentica i nuovi agenti utente, o una volta al mese, qualunque cosa si adatti al tuo caso ), come
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
che, ad esempio, sposterebbe le richieste da http: //domain/index.html a http: //domain/mobile/index.html
Se non ti piace l'approccio di avere uno script che ricrea periodicamente un file htaccess, puoi scrivere un modulo che controlla l'Utente Utente (non ne ho trovato uno già fatto, ma l'ho trovato particolarmente appropriato esempio ) e ottenere agenti utente da alcuni siti per aggiornarli. Quindi puoi complicare l'approccio quanto vuoi, ma penso che nel tuo caso l'approccio precedente andrebbe bene.
Altri suggerimenti
Esistono script open source su Rileva browser mobile che lo fanno in Apache, ASP, ColdFusion, JavaScript e PHP.
Solo un pensiero, ma cosa succede se hai risolto questo problema dalla direzione opposta? Invece di determinare quali browser sono mobili, perché non determinare quali browser non lo sono? Quindi codifica il tuo sito per impostazione predefinita alla versione mobile e reindirizza alla versione standard. Esistono due possibilità di base quando si guarda un browser mobile. O ha il supporto javascript o no. Quindi, se il browser non supporta javascript, passerà automaticamente alla versione mobile. Se ha il supporto JavaScript, controlla le dimensioni dello schermo. Qualunque cosa al di sotto di una certa dimensione sarà probabilmente anche un browser mobile. Qualunque cosa più grande verrà reindirizzata al layout standard. Quindi tutto ciò che devi fare è determinare se l'utente con JavaScript disabilitato è mobile o meno.
Secondo il W3C il numero di utenti con JavaScript disabilitato era di circa il 5% e di quegli utenti la maggior parte lo ha disattivato, il che implica che in realtà sanno cosa stanno facendo con un browser. Sono gran parte del tuo pubblico? In caso contrario, non preoccuparti per loro. In tal caso, qual è lo scenario peggiore? Hai quegli utenti che navigano nella versione mobile del tuo sito, e questa è una buona cosa.
Ecco come lo faccio in JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
Guarda un esempio in www.tablemaker.net/test/mobile.html dove triplica la dimensione del carattere sui telefoni cellulari.
Il mio meccanismo di rilevamento del browser mobile preferito è WURFL . Viene aggiornato frequentemente e funziona con tutte le principali piattaforme di programmazione / linguaggio.
Hai preso in considerazione l'utilizzo di media query css3? Nella maggior parte dei casi è possibile applicare alcuni stili CSS specificamente per il dispositivo di destinazione senza dover creare una versione mobile separata del sito.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Puoi impostare la larghezza come preferisci, ma 1025 catturerà la vista orizzontale dell'iPad.
Ti consigliamo anche di aggiungere il seguente meta tag alla testa:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Consulta questo articolo su HTML5 Rocks per alcuni buoni esempi
per ANDROID, IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
Il file del browser del dispositivo mobile è un ottimo modo per rilevare broswer mobili (e altri) per progetti ASP.NET: http: //mdbf.codeplex.com/
Puoi rilevare i client mobili semplicemente tramite navigator.userAgent e caricare script alternativi basati sul tipo di client rilevato come:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
È possibile controllare la stringa User-Agent. In JavaScript, è davvero facile, è solo una proprietà dell'oggetto navigatore.
var useragent = navigator.userAgent;
Puoi verificare se il dispositivo è iPhone o Blackberry in JS con qualcosa di simile
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
se isIphone è vero stai accedendo al sito da un Iphone, se isBlackBerry stai accedendo al sito da un Blackberry.
Puoi utilizzare " UserAgent Switcher " plugin per firefox per testarlo.
Se anche tu sei interessato, potrebbe valerne la pena dare un'occhiata al mio script " redirection_mobile.js " ospitato su github qui https://github.com/sebarmeli/JS- Redirection-Mobile-Site e puoi leggere maggiori dettagli in uno dei miei articoli qui:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Questo esempio funziona in asp.net
Non hai detto quale lingua stai usando. Se è Perl, allora è banale:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
Sì, l'utente-agente viene utilizzato per rilevare i browser mobili. Ci sono molti script gratuiti disponibili per verificare questo. Ecco uno di questi codice php che ti aiuterà a reindirizzare gli utenti mobili a siti Web diversi.
Ho messo questa demo con script ed esempi inclusi insieme:
http: // www. mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
Questo esempio utilizza le funzioni php per il rilevamento dell'agente utente e offre l'ulteriore vantaggio di consentire agli utenti di indicare una preferenza per una versione del sito che in genere non sarebbe quella predefinita in base al browser o al tipo di dispositivo. Questo viene fatto con i cookie (gestito utilizzando php sul lato server anziché JavaScript).
Assicurati di controllare il link per il download nell'articolo per gli esempi.
Spero ti piaccia!
MobileESP ha hook PHP, Java, APS.NET (C #), Ruby e JavaScript. ha anche la licenza Apache 2, quindi gratuita per uso commerciale. La cosa fondamentale per me è che identifica solo i browser e le piattaforme, non le dimensioni dello schermo e altre metriche, il che lo rende bello un po 'piccolo.
Esiste una nuova soluzione che utilizza Zend Framework. Inizia dal link a Zend_HTTP_UserAgent:
