Redirect verso sito in versione Mobile

Francesco PC Academy di - 14 gennaio 2013 in Web Design

Voglio condividere con voi in questo post, il codice Javascript che permette di reindirizzare in automatico un dispositivo mobile alla versione apposita del vostro sito.

Questo vuol dire che dovrete aver realizzato il sito sia nella versione desktop (per i pc) sia nella versione mobile per essere visualizzato in maniera migliore sugli schermi di iPhone e smartphone.

Con questo codice, inserito nell’head, ogni qual volta un dispositivo mobile si appresterà a entrare nel vostro sito visualizzerà in maniera automatica la versione Mobile.

Nei prossimi giorni, la Community vi mostrerà come realizzare siti per dispositivi mobili.

Il codice da incorporare è questo:

<script type=”text/javascript”>
if (checkmobile(navigator.userAgent)) window.parent.location=”//mobile.tuosito.com/”
function checkmobile(nameApp) {
if (nameApp.indexOf(‘MSIE’) != -1) return false;
if (nameApp.indexOf(‘iPhone’) != -1) return true;
if (nameApp.indexOf(‘Trident’) != -1) return true;
if (nameApp.indexOf(‘Creative AutoUpdate’) != -1) return false;

browser_list = new Array(“midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320”, “opwv”, “chtml”, “pda”, “windows ce”, “mmp/”, “blackberry”, “mib/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up.b”, “audio”, “SIE-“, “SEC-“, “samsung”, “HTC”, “mot-“, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “erics”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “dddi”, “moto”);
for(i=0;i<lenght(browser_list);i++){
if(nameApp.indexOf(browser_list[i]) != -1) return true;
}
return false;
}
</script>

Al posto di “//mobile.tuosito.com/” dovrete inserire il vostro link.

Francesco

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti

  • Patrizia

    C’è la possibilità poi da mobile di tornare alla versione desktop attraverso un link?
    Grazie 1000

    • Francesco PC Academy

      Ciao Patrizia,
      c’è la possibilità di far scegliere all’utente che si connette da smartphone di visualizzare il sito in versione mobile o desktop, di conseguenza anche una volta entrato nella versione mobile si può inserire il link che rimanda alla versione desktop.

  • Enrico

    Ciao,
    una informazione.

    io ho:

    -sito normale
    -sito mobile

    Un utente mobile si collega al sito normale e gli esce la pagina di scelta “normale o mobile”?

    In questo caso quindi sarebbe
    //mobile.tuosito.com/paginadiscelta.html

    Uno sceglie il normale….Non è che poi arrivando sul normale gli riappare la pagina di scelta?

    dove posso trovare il codice il codice?

    • Francesco PC Academy

      Buongiorno Enrico,
      allora, la pagina di scelta la puoi inserire nella index del sito mobile. Quindi se una persona sceglie “normale” verrà indirizzata all’home page del sito normale e non potrà riapparirgli la pagina di scelta.
      Quindi ti conviene creare la index del sito mobile con la pagina dove si può scegliere se visualizzare la versione mobile o normale con i relativi collegamenti ai link.
      Spero di esserti stato d’aiuto,
      Francesco

  • Ciao francesco , ho provato il tuo codice sul mio sito versione desktop inserendolo all’interno del head dell’index inserendo il link della struttura del sito versione mobile
    ”//www.informaticadab.it/mobile/demos/main/”

    provando da browser mobile rimane sempre la solita struttura verisone desktop
    potresti darmi qualche dritta grazie

  • mirko

    Ciao, ho visto lo script e l’ho provato… su iphone funziona e mi apre il link che ho impostato per la versione mobile, ma se apro il sito su un sony xperia rimane sulla pagina desktop e non la invia a quella mobile… come mai?

  • salve, io usa iweb per le mie pagine,
    ho creato lo stesso sito in versione mobile
    link: //www.furatola.it/Furatola/Furatola_mobi.html
    il mio problema è che non so dove inserire lo script che hai postato.
    la struttura di pubblicazione è composta così
    root:
    index.html
    cartella furatola
    e file plist
    nella cartella furatola ho
    ancora index.html
    poi furatola.htm
    e
    furatola_mobi.html
    ora ho provato a mettere il tuo script sia nell’html della root index e non va sia nella cartella furatula index e non va sia nel file furatola html e non va.

    premetto che il sito è sviluppato in monopagina quindi tutto su un file.
    chiedo aiuto grazie

    • Francesco PC Academy

      nell’head delle tue pagine!

  • questa è la index fuori nella root

  • Intanto grazie Francesco,
    Non riesco a visualizzare la versione app digitando dal mio smartphone l’ indirizzo del mio sito.
    Ho inserito come da tue istruzioni la redirect: (//www.inteext.it.mobapp.at)
    Chiedevo se avessi dovuto inserire anche il nome della app sulla stringa ——-checkmobile(nameApp) ——
    Poi per finire: riuscirò a crearla da solo questa mia app uscendo da como? visto che sono io segnato come sviluppatore e tutte le fasi di registrazioni le ho fatte io?
    Grazie di nuovo

  • Ciao ragazzi,ho usato per il rendering un codice simile a questo e funziona benissima,sapete pero’ come fare per mettere un link sul mobile che riporti al desktop?Grazie mille