Webdesigner - Abfrage einbauen, ob Mobile Seite oder Desktopseite angezeigt werden soll

sabi70 schrieb am 06.03.2015 um 09:51 Uhr

Hallo und guten Morgen,

ich habe mir nun erfolgreich eine mobile Seite manuell erstellt und auch die PHP Abfrage mit eingebaut, wie im Magazin beschrieben:

<?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: ../mobil/index.htm");
} else {
header( 'Location: start.htm' );
}

?>

Funktioniert auch - oh Wunder - auf Anhieb. Hätte ich echt nicht gedacht und bin begeistert.

So, nun hat mich unwissende der Ehrgeiz gepackt und ich würde gerne eine Abfrage einbauen, ob die mobile Seite oder Desktopseite angezeigt werden soll.

Auch Tablets werden ja als mobil erkannt, wobei dort teilweise die Anzeige so groß ist, dass man auch wunderbar die normale Webseite anschauen könnte. Mich nervt das immer, wenn ich auf solche Seiten komme, dass ich gezwungen bin die mobile Seite zu wählen.

Ich habe jetzt auf der Webseite einen Link eingebaut "Wechsel zur Desktopansicht" aber das ist natürlich nicht so elegant, als würde man bei der mobilen Variante eine Abfrage einbauen.

Diesbezüglich bin ich nun abhängig von Euch, weil ich davon keine Ahnung habe. Wenn es nicht geht oder zu kompliziert ist, dann ist es auch nicht schlimm, bin ja schon froh, dass die Erkennung so, wie der Code oben ist funktioniert.... aber super wäre das :-) .

Grüße

Sabine

Kommentare

BeRo schrieb am 06.03.2015 um 11:18 Uhr

[...] das ist natürlich nicht so elegant, als würde man bei der mobilen Variante eine Abfrage einbauen. [...]

Dass das zutrifft, da bin ich mir nicht so sicher...

Um entscheiden zu können, ob die mobil Variante auf meinem Tablet (oder Smartphone) unpassend ist, müsste ich sie mal gesehen haben. Aus meiner Sicht macht es erst dann Sinn, die Auswahl Option "Desktop Ansicht" zu haben.
Insofern halte ich den von Dir schon platzierten Link zur "Desktop Ansicht" für sinnvoll.

Aber natürlich kannst Du auch ein JavaScript auf die Startseite der mobilen Variante ablegen, das abhängig von der Bildschirmgröße die Weiterleitung automatisch vornimmt.

Wenn Du den u. a. Code verwendest, erfolgt die Weiterleitung auf die zur Bildschirmbreite passende Seite beim ersten Aufruf der URL und beim Reload einer Seite. Die spätere Veränderung der Bildschirmbreite hat keinen Einfluss auf die Darstellung.

Um den Code einzubauen, kopierst Du in den HTML Head der mobilen Startseite die folgende JS Funktion "Screen()":

-----------------------------------------
<script type="text/javascript">
function Screen()
{
if (screen.width<=640)
window.location = "mobile.htm";
if (screen.width<=800)
window.location = "mobile2.htm";
if (screen.width>800
window.location = "desktop.htm";
}
</script>
-----------------------------------------

In den HTML Body kopierst Du dann noch den u. a. Aufruf der Funktion "Screen()":

-----------------------------------------
<body onload="Screen()">
-----------------------------------------

Das war's dann schon.

Die im Code farbig markierten Trigger Werte für "screen.width" (Breite des Bildschirms) kannst Du nach Belieben einstellen. Die beiden grün markierten Werte müssen aber identisch geändert werden.
Die blau markierten Namen der Startseiten der jeweils benötigen Ansicht passt Du natürlich auf die Namen Deiner Seiten an...

Abhängig von der schon aktiven mobilen Seite beim Aufruf der URL, solltest Du den entsprechenden Codeteil aus der Verteilung entfernen, damit es nicht zu einer Endlosschleife kommt.

Probier's einfach aus.

Viel Erfolg

sabi70 schrieb am 06.03.2015 um 21:23 Uhr

Danke schön

Nochmal ne Frage. Kann man es nicht so lösen, dass ein User auf die vermeintlich mobile Webseite kommt (also die mobile würde aufgerufen werden) und statt, dass direkt die mobile Version erscheint, erscheint ein Popup, ob er die mobile oder die Desktopversion möchte. Sag man überhaupt Desktopversion oder ist das für Otto-Normaluser unverständlich?

Ich könnte ja auch einen Startseite so erstellen, dass dort als erstes eine Abfrage ist, welche Variante der User möchte aber eine Art Popup würde mir besser gefallen.

Sorry, wenn ich rumnerve und danke für Deine tolle Hilfe !!!!

Edit: Habs gerade bei der www.bild.de getestet, weil ich das da mal gesehen hatte. Da wird man gefragt "Möchten Sie zur mobilen Version dieser Seite wechseln?" Ja = es geht weiter zur mobilen Seite, Nein = man wird zur Desktopversion geleitet.

BeRo schrieb am 06.03.2015 um 23:42 Uhr

[...] eine Art Popup würde mir besser gefallen. [...]

Kein Problem.

Du erstellst auf der mobil Startseite eine locked popup Ebene mit dem gewünschten Inhalt (Frage und Link Buttons auf Desktop- oder mobil Variante). Der Name der Ebene muss den Zusatz "(lock)" haben (s. Screenshot), damit die Ebene nicht durch einen Klick auf die Seite geschlossen werden kann.

Dann erstellst Du einen (Dummy) Link Button, dem Du einen Link auf die popup Ebene "Frage (lock)" gibst.

Damit die popup Ebene per JavaScript manipuliert werden kann, musst Du feststellen, wie der WD die Ebene indexiert hat.
Dazu öffnest Du die Vorschau der Startseite der mobil Variante und positionierst den Mauszeiger auf den Dummy Button. Im Fußbereich des Vorschau Fensters kannst Du jetzt den gesuchten Indexwert sehen.
In unserm Beispiel ist das die 4 ["xr_cpu(4)"]

Mit dem Wissen kannst Du die popup Ebene automatisch öffnen, wenn die Seite geladen wird.
Das geht mit dem folgenden JS Code, der in den HTML Body der mobilen Startseite gehört.

----------------------------
<script type="text/javascript">
window.onload=(xr_cpu(4));
</script>
---------------------------

Oder, noch einfacher:

---------------------------
<body onload="xr_cpu(4);">
---------------------------

Im Code gelb markiert ist der Indexwert der popup Ebene, der ggf. bei Deinem Projekt ein anderer sein kann.

Der Button "Ja" bekommt im Link Feld "Link auf Internet oder E-Mail Adresse" einen Link auf die Startseite der Desktop Version. Also z. B. "./index-d.htm"

Um die (locked) popup Ebene zu schließen, wenn der Besucher nicht auf die Desktop Ebene wechseln will, muss der Button "Nein" ein vom WD angelegtes JavaScript aufrufen. Der Aufruf sieht so aus:

-------------------------
javascript:xr_ppc('xr_xp4');
-------------------------

Auch hier ist der Indexwert gelb markiert. Er kann in Deinem Projekt einen anderen Wert haben.

Nun musst Du nur noch den Dummy Button außerhalb des Seitenbereichs unterbringen, damit er das Design nicht stört. Er darf aber nicht gelöscht werden, sonst funktioniert das Ein- /Ausblenden nicht mehr.

Das war's dann auch schon...

Viel Erfolg

sabi70 schrieb am 07.03.2015 um 18:17 Uhr

Du bist der Beste .... DANKE SCHÖN !!!!