Umleitung für Smartphones - Beispiel mit JavaScript

 

Diese Seite wird nach Bestätigung bei Aufruf mit dem Smartphone umgeleitet nach: www.nof-tutorials.com/Smartphone-jQuery

Auf dieser Seite habe ich das Skript unten von http://andreknieriem.de/iphone-umleitung-auf-mobile-seite/ eingebaut.

Hier geht es zu meiner mobilen Testseite (fixierter Footer und fixierte Größe am Handy), auf die beim Aufruf mit dem Handy dieser Seite hier weitergeleitet wird und die ich händisch mit jQuery-Mobile und HTML5 erstellt habe. So kann ein Template von NOF für eine Smartphone-Seite als Vergleich aussehen.

Die Handy Seite ist komplett dynamisch und wird sich jeder Auflösung anpassen, auch wenn man das Handy dreht.

Einige Ansichten von meinem Smartphone. Klick zur Ansicht einer etwas anderen Seite, ohne fixierten Footer und in Größe am Handy änderbar:

zur mobilen Website
zur mobilen Website

Guckt Euch auch diese tolle Seiten von Strunz zur Vorschau auf dem Smartphone und Tablet-PC an.

Kopiert das Skript unten in Euren Windows-Editor und speichert es ab als z.B.

mobile.js

Kopiert diese Datei in das Verzeichnis “Assets” von Eurem Projekt und lest diese Datei (mobile.js) in Eurer Projekt ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > 3. Button oben “Reihenfolge beim Import der Skriptdateien” > auf “+” Zeichen klicken und Datei aus dem Verzeichnis “Assets” hinzufügen.

Skriptimport

 

Ändert die URL zu Eurer mobilen Seite und den Cookie-Namen. Vor der Weiterleitung wird am mobilen Gerät abgefragt, ob weitergeleitet werden soll oder nicht. Wird diese Abfrage abgelehnt, dann wird ein Cookie auf dem Handy gespeichert, sodass diese Abfrage innerhalb von (in diesem Beispiel) 90 Tagen nicht erneut erscheint. Ich persönlich habe diesen Wert für dieser Seite hier auf 3 Tage gesetzt.

        function CookieSave(name, value, days)
        {
                if (typeof days != 'undefined') {
                        var date = new Date();
                        date.setTime(date.getTime() + (days*24*60*60*1000));
                        var expires = "; expires=" + date.toGMTString();
                } else {
                        var expires = "";
                }
                document.cookie = name + "=" + value + expires + "; path=/";
        }

        function CookieGet(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for(var i=0;i < ca.length;i++) {
                                var c = ca[i];
                                while (c.charAt(0)==' ') {
                                        c = c.substring(1,c.length);
                                }
                                if (c.indexOf(nameEQ) == 0) {
                                        return c.substring(nameEQ.length,c.length);
                                }
                }
                return null;
        }

        function mredirect(){
        var mconfirm = confirm('Wollen Sie auf die mobile Version weitergeleitet werden?');
        if(mconfirm == true){
            window.location.href = "http://www.DeineDomain.de/MobileSeite/"; // Hier das Verzeichnis festlegen
        }else{
            // Setze Cookie um spaetere Dialoge zu vermeiden
            CookieSave('NoMobile', '1', '90'); // Hier den Cookie-Namen ändern. Cookie für 90 Tage. Für Abfrage erzwingen 90 auf 0 setzen.
        }
    }


    function Client() {
    }

    Client.prototype.mobileClients = ["240x320","blackberry","netfront","nokia","panasonic","portalmmm","sharp","sie-","sonyericsson","symbian","windows ce","benq","mda","mot-","philips","pocket pc","sagem","samsung","sda","sgh-","vodafone","xda","iphone","android"];

    Client.prototype.OperaMini = ["midp","opera mini"]

    Client.prototype.isMobileClient = function(userAgent)
    {
        userAgent=userAgent.toLowerCase();
        for (var i in this.mobileClients) {
            if (userAgent.indexOf(this.mobileClients[i]) != -1) {
                return true;
            }
        }
        return false;
    }

    Client.prototype.isOperaMini = function(userAgent)
    {
        userAgent=userAgent.toLowerCase();
        for (var i in this.OperaMini) {
            if (userAgent.indexOf(this.OperaMini[i]) != -1) {
                return true;
            }
        }
        return false;
    }

    if(CookieGet('NoMobile') != 1) { // Hier den Cookie-Namen anpassen

        var client = new Client();
        if (client.isMobileClient(navigator.userAgent)) {
                                mredirect();
            }
        else if(client.isOperaMini(navigator.userAgent)){
                document.observe('dom:loaded', mredirect);
            }
        }

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik