Auf Mobile Website Umleiten
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
anpassen
benutzer
browser
code
entscheiden
entscheidung
erkennung
halten
header
http
index
mache
nachteil
opus
start
tag
trick
umleitung
url
webseite
-
Hey!
Bin Hier neu. Bin auch leider Noch ein Anfänger.
Ich Frage mich wie ich eine Umleitung von der Desktop Version zu der Mobilen Version tag/mache">machen Kann. Aber der Besucher sollte Aber es selbst entscheiden.
Wie geht den das?
Danke für jede Hilfe -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi app-tricks, für deinen Fall würde sich Javascript sehr gut eignen. Hier mal ein kurzes Beispiel:
<script> (function(a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) wirklich_umleiten() })(navigator.userAgent || navigator.vendor || window.opera); function wirklich_umleiten() { if(confirm(unescape("Du verwendest anscheinend einen mobilen Browser.%0AM%F6chtest du zur mobilen Ansicht wechseln%3F"))) //Nachricht, welche bei Erkennung eines mobilen Browsers angezeigt wird window.location = 'http://deine-webseite.de/mobile'; //ersetze dies durch die URL deiner mobilen Seite else return false; } </script>
Dieses Script musst du einfach in den Head- oder Body-Tag deiner Webseite einfügen. Bearbeite nur vorher die URL, zu der umgeleitet werden soll.
Das Script zur Erkennung des mobilen Browsers stammt von http://detectmobilebrowsers.com/
Hoffe, dass ich helfen konnte :)
Beitrag zuletzt geändert: 20.7.2015 9:12:56 von leons -
leons schrieb:
Hi app-tricks, für deinen Fall würde sich Javascript sehr gut eignen. Hier mal ein kurzes Beispiel:
<script> (function(a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) wirklich_umleiten() })(navigator.userAgent || navigator.vendor || window.opera); function wirklich_umleiten() { if(confirm(unescape("Du verwendest anscheinend einen mobilen Browser.%0AM%F6chtest du zur mobilen Ansicht wechseln%3F"))) //Nachricht, welche bei Erkennung eines mobilen Browsers angezeigt wird window.location = 'http://deine-webseite.de/mobile'; //ersetze dies durch die URL deiner mobilen Seite else return false; } </script>
Dieses Script musst du einfach in den Head- oder Body-Tag deiner Webseite einfügen. Bearbeite nur vorher die URL, zu der umgeleitet werden soll.
Das Script zur Erkennung des mobilen Browsers stammt von http://detectmobilebrowsers.com/
Hoffe, dass ich helfen konnte :)
Und was, wenn bei mir Javascript deaktiviert ist? Dann komme ich gar nicht auf die mobile Seite.
Ich vertrete eher den Standpunkt, dass man mit den heutigen Möglichkeiten keine mobile Seite brauche sondern eine Webseite macht, welche sich dem Gerät anpasst. "media-queries" in CSS wurden nicht umsonst eingebaut. -
Und was, wenn bei mir Javascript deaktiviert ist? Dann komme ich gar nicht auf die mobile Seite.
Eine Umleitung wäre natürlich auch mit PHP möglich (siehe http://detectmobilebrowsers.com/). So kann auf eine Seite umgeleitet, auf welcher man entscheiden kann, ob man die Desktop- oder die mobile Version verwendet. Diese Entscheidung entfällt meines Wissens nach leider bei der Verwendung von media-queries.
Beitrag zuletzt geändert: 20.7.2015 9:35:23 von leons -
Ja, natürlich entfällt die Entscheidung bei den Media-Queries. Aber dort brauche ich keine Entscheidung, weil mir, egal auf welchem Gerät, alle Möglichkeiten der Webseite zur Verfügung stehen.
Außerdem sollte eine Webseite auch auf Desktop-Browsern im kleinen Format funktionieren. Viele Seiten scheitern schon daran bei ~960px Breite ohne horizontale Scrollbalken aus zu kommen. Soll ich dann mit dem Browser am Desktop auch auf die mobile Seite gehen? Wäre es nicht besser, wenn sich die Webseite anpassen würde? -
Soll ich dann mit dem Browser am Desktop auch auf die mobile Seite gehen? Wäre es nicht besser, wenn sich die Webseite anpassen würde?
Wenn die Entscheidung unwesentlich ist, dann wäre es natürlich besser, wenn sich die Webseite anpassen würde. Auf w3schools.com gibt es übrigens ein paar schöne Beispiele für media-queries.
Ich wollte mich bei meiner Antwort nur erstmal auf die konkrete Fragestellung von app-tricks beziehen.
-
leons schrieb:
Und was, wenn bei mir Javascript deaktiviert ist? Dann komme ich gar nicht auf die mobile Seite.
Eine Umleitung wäre natürlich auch mit PHP möglich (siehe http://detectmobilebrowsers.com/). So kann auf eine Seite umgeleitet, auf welcher man entscheiden kann, ob man die Desktop- oder die mobile Version verwendet. Diese Entscheidung entfällt meines Wissens nach leider bei der Verwendung von media-queries.
Mit Media querys wollte ich ja zu erst arbeiten Aber es gibt Nachteile.
1. Du zwingst den benutzer Die optimierte Website zu benutzen.
2. Es würden alle Sachen geladen werden obwohl Sie nicht angezeigt werden.
3. Mache wollen eher Die Desktop Version am Handy sehen.
4. Am Tablet ist Die Desktop Version Gut geeignet.
5. Der Aufwand ist der selbe ;)
6. Will es gerne auseinander halten.
Nicht böse gemeint.
Sind halt Die Ich Nicht will.
Der Benutzer darf es selbst entscheiden wie er meine Website sehem will.
Und man kann die lade Geschwindigkeit nochmal erhöhen.
Gruß -
[...]
1. Du zwingst den benutzer Die optimierte Website zu benutzen.
2. Es würden alle Sachen geladen werden obwohl Sie nicht angezeigt werden.
3. Mache wollen eher Die Desktop Version am Handy sehen.
4. Am Tablet ist Die Desktop Version Gut geeignet.
5. Der Aufwand ist der selbe ;)
6. Will es gerne auseinander halten.
Hallo app-tricks,
wenn der User das erste Mal über ein "mobile device" kommt, dann dann frag doch den User einfach was er will!
Die Rückantwort bunkerst Du entweder als Cookie oder in den Benutzereinstellungen.
Wenn der User wiederkommt, dann bekommt er seine letzte Einstellung wieder eingestellt und fertig
Gruss Dunkeltuten
Beitrag zuletzt geändert: 20.7.2015 13:40:42 von dunkeltuten -
Sry hatte vergessen was zu sagen.
Ich meinte Die Nachteile wenn man die Website Responsive gestaltet.
Da hat der User ja kein Einfluss mehr.
Weil es sich wegen Media Querys anpassen tut.
So mit Media Querys zuarbeiten ist in Ordnung.
Ich redete nur wegen dem Responsiven Webdisgn.
Gruß -
app-tricks schrieb:
3. Mache wollen eher Die Desktop Version am Handy sehen.
Was das angeht, kann der Nutzer trotzdem auf die Dektop version umschalten, sofern es die zugehörige Funktion im Browser gibt und ich mich nicht irre
-
will mich ja hier bei den Profis nicht "einmischen" aber ich hab einfach 2 Versionen gemacht (mobile + desktop) und die index.php leitet je nachdem um. Wobei per Klick der User immer noch entscheiden darf ob er auf die dsktop version gehen will.
index.php <?php $useragent = $_SERVER['HTTP_USER_AGENT']; if (preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent)) { header( 'Location: http://www.autonomes-trading.de/MOBILE.html' ); } else { header( 'Location: http://www.autonomes-trading.de/START.html' ); } ?>
Beitrag zuletzt geändert: 4.9.2015 21:11:34 von autonomestrading -
Und wer macht beim Google Bot den Klick?
@autonomestrading: Wenn ich auf deine Website gehe (mit Samsung Galaxy S3) sieht es erst einmal gut aus. Wenn ich jetzt aber mein Smartphone drehe, bleibt die Darstellung schmal links.
Wenn ich mir deinen PHP-Code ansehe und in Verbindung zur gesehenen Website setze , dann behandelst du alle mobilen Geräte gleich. Das ist nicht gerade das gelbe vom Ei.
Google schreibt dazu
Tablets: Wir sehen Tablets als eigene Geräteklasse an, weshalb wir Tablets in der Regel ausschließen, wenn wir von Mobilgeräten sprechen. Tablets haben meist größere Bildschirme, was dazu führt, dass Nutzer erwarten, dass eine Website so aussieht wie in einem Desktop-Browser und nicht wie in einem Smartphone-Browser, sofern Sie keine für Tablets optimierte Inhalte anbieten.
Quelle:https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/different-devices?hl=de
Beitrag zuletzt geändert: 4.9.2015 21:31:08 von mein-wunschname -
stimmt für Google musst die sitemap.xml noch "anpassen" weil sonst wirst noch wegen fehlender Mobile "abgewertet"
<url> <loc>http://www.autonomes-trading.de/START.html</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.autonomes-trading.de/MOBILE.html" /> </url>
@ mein-wunschname
wenn die Desktop html Version z.B. 1024 hat, und du das auf einem Tablett umgeleitet haben willst, dann kannst du das nur mit js. umleiten welche du dann der MOBILE.htm nach der index.php Umleitung vorschalten musst, damit das auf der Desktop Version landet.
<body> <script type="text/javascript"> if (screen.width < 1024) { window.location.href = "MOBILE.html"; } else { window.location.href = "START.html"; } </script> <p>Kein Script installiert, die Seite manuell auswählen: <a href="http://www.autonomes-trading.de/START.html"> http://www.autonomes-trading.de/START.html</a> <a href="http://www.autonomes-trading.de/MOBILE.html"> http://www.autonomes-trading.de/MOBILE.html</a> </p> </body>
und mit Opera kann man alle möglichen Mobilgeräte dann testen. http://www.opera.com/de/developer/mobile-emulator
Beitrag zuletzt geändert: 5.9.2015 16:04:34 von autonomestrading -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
