Mobile Webseiten erstellen

Webseiten für Smartphones und Tablets zu optimieren ist seit dem „Mobile-Friendly-Update von Google“ wichtiger denn je geworden. Lesen Sie in diesem Artikel, welche Möglichkeiten der Erstellung mobiler Webseiten es gibt. Gerne unterstützen wir Sie auch bei der Umsetzung.

Mobile Webseite erstellen lassen

Die mobile Optimierung von Webseiten wird für gute Rankings in der mobilen Suche von Google unabdingbar.

Das Surfverhalten im Internet hat sich grundsätzlich geändert. Das Smartphone ist aus dem modernen Alltag nicht mehr wegzudenken. Wo auch immer man sich bewegt, so begleiten einen die mobilen Alleskönner. Seit dem „Mobile-Friendly-Update“ von Google - das große Suchalgorithmus-Update vom 21. April 2015 - ist für viele Webseitenbetreiber das „Mobilegeddon“ eingetreten. Eine für mobile Geräte optimierte Webseite ist ein absolutes Muss geworden.

Erfahren Sie in diesem Artikel, welche technischen Möglichkeiten es gibt und wie Sie diese umsetzen können. Gerne stehen wir Ihnen als Experten zur Seite.

Die wichtigsten Anforderungen an eine mobile Webseite auf einen Blick:

  • angepasste Darstellung für unterschiedliche Bildschirmgrößen
  • gut lesbare Texte mit großem Zeilenabstand
  • barrierefreie Seitennavigation ohne Dropdownmenüs
  • schneller Webseitenaufbau
  • optimierte Bilder und Grafiken

Responsive Webdesign - Dynamische Bereitstellung durch Browsererkennung - Weiterleitung auf mobile URLs

Es gibt insgesamt drei Methoden zur Umsetzung einer mobilen Webseite, die allesamt den Anforderungen von Google gerecht werden. Dabei handelt es sich dabei um:

  1. Responsive Webdesign
  2. Dynamische Bereitstellung
  3. Weiterleitung auf mobile URLs (bspw. m.domain.tld)

Die erste Methode reagiert dabei auf die Bildschirmgröße des Gerätes, die beiden letztgenannten Methoden werden durch Browsererkennung (Erkennung des User-Agents) umgesetzt.

Responsive Webdesign

Bei der Umsetzung einer Webseite im Responsive Webdesign werden für alle Geräte dieselben Inhalte bereitgestellt, jedoch je nach Bildschirmgröße unterschiedlich dargestellt. Das Viewport-Meta-Tag-Element bestimmt den Darstellungsbereich der Webseite. Die Darstellung selbst variiert dabei in Abhängigkeit von der Bildschirmbreite mittels sogenannter Media Queries (Screen) und jeweils verschiedener CCS-Anweisungen für ein Element.

Umsetzung des Responsive Webdesign

Zuallererst muss der Darstellungsbereich der Webseite bestimmt werden. Diese Angabe wird direkt im <header> der Webseite vorgenommen. Fügen Sie dafür folgenden Quellcode in Ihren Dokumenten-Header ein:

<meta name="viewport" content="width=device-width, initial-scale=1">

Um benutzerseitige Darstellungsfehler zu vermeiden, empfehlen wir darüber hinaus das herein- und herauszoomen auf der Webseite zu unterbinden. Dazu müssen Sie den zuvor gezeigten Quellcode wie folgt erweitern:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Mit den bereits erwähnten CSS Media Queries können nun in Abhängigkeit der Bildschirmgröße verschiedene Anweisungen für ein Objekt vergeben werden. Dies könnte wie folgt aussehen:

HTML-Code

<div class="wrapper">
  <div class="inner">&nbsp;</div>
</div>

Es wird an dieser Stelle ein einfaches, umschließendes DIV-Element sowie ein darin befindliches DIV-Element erzeugt. Diese können nun in Abhängigkeit der Bildschirmbreite verschiedene Anweisungen der Darstellung erhalten.

CSS-Code

.wrapper {
  margin: 0 auto;
  width: 960px;
}
.wrapper > .inner {
	margin-left: 25px;
	margin-right: 25px;
}

@media (min-width:768px) and (max-width:979px) {
  .wrapper {
	width: 744px;
  }
  .wrapper > .inner {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width:767px) {
  .wrapper {
	width: 99%;
  }
  .wrapper > .inner {
    margin-left: 0;
    margin-right: 0;
  }
}

Für den Zugriff von einem Desktop-PC, also mit einer größeren Bildschirmbreite als 979 Pixel wird der umschließende DIV zentriert mit einer Breite von 960 Pixel dargestellt. Das innere DIV weist jeweils einen Abstand von 25 Pixel links und rechts auf.

Erfolgt nun der Zugriff mit einem Tablet, also einer gängigen Bildschirmbreite im Bereich von 768 Pixeln bis 979 Pixeln, so wird der umschließende DIV passenderweise auch nur mit einer Breite von 744 Pixeln dargestellt. Der Abstand des inneren DIV reduziert sich auf 15 Pixel.

Schlussendlich, wenn der Zugriff mit einem Smartphone erfolgt, also eine Bildschirm mit geringer Breite als 767 Pixel den Inhalt darstellen soll, wird die Breite des umschließenden DIV auf dynamische 99% gesetzt und der Abstand des inneren DIVs wird auf null gesetzt.

Dynamische Bereitstellung

Bei der dynamischen Bereitstellung von Inhalten muss serverseitig eine Abfrage erfolgen, um dabei herauszufinden, um was für einen User-Agent es sich bei dem Zugriff handelt. Diese Browsererkennung wird für die dynamische Bereitstellung, als auch für die Weiterleitung auf eine separate URL benötigt. Nachfolgend beschreiben wir die Umsetzung und Einbindung der Browsererkennung und gehen im Anschluss auf die Besonderheiten der Weiterleitung auf eine mobile URL ein.

Die serverseitige Browsererkennung

Bei serverseitigen Funktionen handelt es sich zumeist um PHP-Skripte. Diese führen bestimmte Abfragen oder sonstige Aufgaben auf dem Server durch. Das nachfolgend gezeigte PHP-Skript wird dabei beim Zugriff auf die Webseite versuchen herauszufinden, ob es sich um einen mobilen User-Agent handelt. Erstellen Sie eine PHP-Datei mit dem Namen mobile_browser_funktion.php und binden Sie diese sodann über den PHP-Befehl include() in Ihre index.php ein.

PHP-Code

<?php
function find_mobile_browser()
{
  if(preg_match('/(alcatel|android|blackberry|benq|cell|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mobi|motorola|nokia|palm|panasonic|philips|phone|sagem|sharp|smartphone|sony|symbian|t-mobile|up\.browser|up\.link|vodafone|wap|wireless|xda|zte)/i', $_SERVER['HTTP_USER_AGENT']))
  {
    return true;
  }
  else
  {
  return false;
  }
}
?>

Bei der erwähnten index.php handelt es sich um eine sogenannte Template-Datei, die das Grundgerüst Ihrer Webseite darstellt. Diese sollte folgende Angaben beinhalten:

  • <!DOCTYPE...>
  • <html...>
  • <head>
  • <body>

In dem <body>-Bereich werden dann die eigentlichen Inhalte der Webseite ausgegeben. In diesem Artikel zeigen wir Ihnen zusätzlich eine Möglichkeit auf, mit Hilfe derer der Besucher Ihrer Webseite selbst entscheiden kann, ob er beim Zugriff mit einem mobilen Gerät tatsächlich die optimierte mobile Version der Webseite oder doch lieber die Desktop-Version der Webseite besuchen möchte.

Dazu können Sie dem Besucher einen Button bereitstellen, der zur Desktop-Version der Webseite führt, bzw. die Standardausgabe der Inhalte durch Setzen von Cookies ermöglicht. Diese speichern im Browser des Besuchers die Information, dass dieser trotz mobilem User-Agent lieber die Desktop-Variante der Webseite betrachten möchte.

Die Umsetzung der dynamischen Bereitstellung von Inhalten gestalten wir in diesem Beispiel so, dass je nach User-Agent entweder das mobile Stylesheet oder eben das Standardstylesheet eingebunden wird. Diese nennen wir:

  • mobile.css
  • desktop.css

Für die Bereitstellung der verschiedenen Inhalte binden wir in dem Skript-Beispiel zwei unterschiedliche PHP-Inhalts-Dateien ein. Es empfiehlt sich, für die mobile Version ein einspaltiges Layout und für die Desktop-Version ein mehrspaltiges Layout umzusetzen. Die beiden Inhalts-Dateien bezeichnen wir als:

  • mobile_inhalt.php
  • desktop_inhalt.php

Quellcode der gesamten index.php

<?php
// Damit die Funktion header-Location funktioniert
ob_start();
// Browsererkennungsfunktion einbinden
include('mobile_browser_funktion.php');
// Browsererkennungsfunktion abrufen
$mobile_browser = find_mobile_browser();
// Cookies setzen (Benutzer möchte zur Desktop-Ansicht wechseln, hier wird der Cookie für eine Stunde gespeichert)
if(isset($_REQUEST['sessionview_desktop']))
{
  setcookie('sessionview', 'desktop', time() + 3600);
  header('Location: http://ihre-domain.tld/');
}
// Cookies zerstören (Benutzer möchte doch wieder zur Mobile-Ansicht wechseln)
elseif(isset($_REQUEST['sessionview_mobile']))
{
  setcookie('sessionview', 'mobile', time() - 3600);
  header('Location: http://ihre-domain.tld/');
}
?>
<!DOCTYPE...> <!-- gekürzte Fassung -->
<html...> <!-- gekürzte Fassung -->
<head>
<title>...</title>
<!-- Ihre META-Angaben -->
<!-- Stylesheets (Layout) für die Mobile-Version und Desktop-Version Ihrer Internetseite -->
<?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
  // Mitteilung an den Browser (speziell Opera Mobile), dass es sich um eine für Smartphone optimierte Seite handelt
  echo '<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />';
  // CSS für Mobile-Ansicht
  echo '<link rel="stylesheet" href="mobile.css" type="text/css" media="screen" />';
}
else
{
  // CSS für Desktop-Ansicht
  echo '<link rel="stylesheet" href="desktop.css" type="text/css" media="screen" />';
}
?>
</head>
<body>
<?php
// Content Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
  include('mobile_inhalt.php');
  // Button für das Wechseln der Ansicht durch den Benutzer
  if($mobile_browser)
  {
    echo '<a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a>';
  }
}
// Content Desktop-Ansicht
else
{
  include('desktop_inhalt.php');
  // Button für das Wechseln der Ansicht durch den Benutzer
  if($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
  {
    echo '<a href="'. $_GET['url'] .'?sessionview_mobile=1">Zur Mobile-Ansicht wechseln</a>';
  }
}
?>
</body>
</html>
<!-- Ebenfalls für die Sicherstellung der header-Location-Funktionalität -->
<?php ob_end_flush(); ?>

In den ersten Zeilen des Quellcodes sollten Sie den PHP-Befehl ob_start(); und in den letzten Zeilen den Befehl ob_end_flush(); einbauen. Damit stellen wir sicher, dass die PHP-Funktion header('Location: http://ihre-domain.tld/'); korrekt ausgeführt wird. Diese darf normalerweise nämlich nur direkt am Anfang des Quellcodes stehen; das bedeutet, es darf nichts davor ausgegeben werden.

Mit den Befehlszeilen, die mit den Code-Teilen

  • if(isset($_REQUEST['sessionview_desktop']))
  • elseif(isset($_REQUEST['sessionview_mobile']))

beginnen, wird geprüft, ob ein Benutzer mit mobilem Endgerät - denn nur dieser sieht den Link-Button „Zur Desktop-Ansicht wechseln“ - den besagten Ansichtswechselbutton geklickt hat. Dabei wird in der Browser-Url ihre-domain.tld/?sessionview_desktop=1 aufgerufen. Sobald dies geschieht, wird ein Cookie mit einer Haltwertzeit von einer Stunde (3.600 Sekunden) gesetzt. Klickt der Besucher, der nun die normale Standardansicht Ihrer Seite betrachtet, auf den, wieder nur für Ihn als mobiler Surfer sichtbaren Link-Button „Zur Mobile-Ansicht wechseln“, so wird der Cookie, durch aufrufen der Browser-URL ihre-domain.tld/?sessionview_mobile=1 wieder „zerstört“ und die Haltwertzeit dessen um 3.600 Sekunden reduziert.

Weiter werden in Abhängigkeit des User-Agent und dem ggf. gesetzten Cookie die unterschiedlichen Inhalte mit den PHP-Befehlen

  • include('mobile_inhalt.php');
  • include('desktop_inhalt.php');

„inkludiert“.

Weiterleitung auf mobile URL

Zu guter Letzt besteht die Möglichkeit - wiederum in Abhängigkeit des User-Agents, der mittels serverseitiger Browsererkennung ermittelt wird - den Besucher beim Zugriff über mobile Geräte auf eine mobile URL weiterzuleiten. Diese können dabei wie folgt aufgebaut sein:

  • mobile.ihre-domain.tld
  • m.ihre-domain.tld

Dabei handelt es sich schlicht und ergreifend um eine Subdomain zu Ihrer Hauptdomain, die dann wiederum für Smartphones optimiert wird.

Umsetzung der Weiterleitung

Erstellen Sie wie bereits im Kapitel zur dynamischen Bereitstellung beschrieben die mobile_browser_funktion.php und binden Sie diese anschließend über den PHP-Befehl include() in Ihre index.php ein. Der Quellcode dafür sollte wie folgt aufgebaut werden.

Quellcode der index.php

<?php
// Wieder ganz am Anfang Ihrer index.php
include('mobile_browser_funktion.php');
$mobile_browser = find_mobile_browser();
if($mobile_browser &&$_SERVER['HTTP_HOST'] != 'm.ihre-domain.tld')
{
  header('Location: http://m.ihre-domain.tld/');
}
else
{} // Aufbau des Desktop-PC Seiten-Templates
?>

Die Wahl der besten Methode zur Umsetzung einer mobilen Webseite.

Bei der Wahl der passenden Methode zur Erstellung einer mobilen Webseite kommt es primär natürlich auf die persönlichen Anforderungen an die Webseite an. Möchten Sie tatsächlich zwei ganz unterschiedliche Webseiten erstellen, empfiehlt sich die Weiterleitung auf eine mobile URL. Wenn Sie hingegen gerne auf einer Webseite unterschiedliche Inhalte oder Templates einbinden wollen, ist die dynamische Bereitstellung von Inhalten sinnvoll. Am gängigsten und vor allem einfachsten zu pflegen und umzusetzen dürfte das Responsive Webdesign sein.

Responsive Webdesign

Responsive Webdesign

  • gleiche URL für jeden User-Agent
  • reduzierter Wartungsaufwand
  • positives Crawling der Webseite
Responsive Webdesign
Dynamische Bereitstellung von Inhalten

Dynamische Bereitstellung von Inhalten

  • gleiche URL für jeden User-Agent
  • unterschiedliche HTML-Inhalte
  • User-Agent-Erkennung fehlerbehaftet
  • höherer Wartungsaufwand
Dynamische Bereitstellung von Inhalten
Weiterleitung auf mobile URL

Weiterleitung auf mobile URL

  • zwei unterschiedliche Webseiten
  • User-Agent-Erkennung fehlerbehaftet
  • sehr hoher Wartungsaufwand
  • mögliche Fehler in der Verlinkung
Weiterleitung auf mobile URL

So setzen auch wir als Agentur für Medienproduktion und Gestaltung auf die Technologie des Responsive Design. Gerne beraten wir Sie für die Umsetzung Ihrer Projekte oder setzen diese in Gänze für Sie um. Haben Sie weitere Fragen zu diesem Artikel, so beantworten wir diese in den Kommentaren.

21 Kommentare Artikel vom von Marco Dittmer

Einen Kommentar schreiben

Kommentar von Carolin

Hallo Marco,

vielen Dank für Deinen Tipp, das klingt, als wäre das die richtige Lösung für mich.

Jetzt habe ich noch eine Bitte - kannst Du das Menü am Schluss Deines Artikels detaillierter erklären? Wo muss der Code eingefügt werden? Was muss in den Platzhaltern stehen? Schreibe ich in Information meine Navigation mit allen CSS und HTML-Formatierungen? Ich habe vor dieser Anfrage schon einiges ausprobiert, komme aber leider nicht auf das gewünschte Ergebnis.

Danke und beste Grüße,
Carolin

Antwort von Marco Dittmer

Ich persönlich greife gerne auf eine jQuery-Lösung für die mobile Navigation zurück. Dabei wird dem Klick eines Menübuttons (class="menu-link") eine Aktion - in diesem Fall das Aufklappen des Menüs (id="navigation") - zugewiesen. Weiter wird dem Menübutton eine Klasse hinzugefügt, bzw. wieder entfernt, worüber sich dieser in Abhängigkeit gestalten lässt.

HTML:

<nav id="navigation">

<!-- Menübutton -->
<a class="menu-link" href="#menu">Menu</a>

<!-- Navigationsmenü -->
<ul>
  <li><a href=#" title="Navigation 1">Navigationspunkt 1</a></li>
  <li><a href=#" title="Navigation 2">Navigationspunkt 2</a></li>
  <li><a href=#" title="Navigation 3">Navigationspunkt 3</a></li>
</ul>

</nav>

CSS:

Nach Belieben das Navigationsmenü gestalten.

jQuery:

<script>
$(document).ready(function() {
  var $menu = $('#navigation'),
    $menulink = $('.menu-link'),
    $menuhref = $('#navigation > ul > li a');

    $menulink.click(function(e) {
      e.preventDefault();
        $menulink.toggleClass('menu-active');
        $menu.slideToggle();

    });

    $menuhref.click(function(e) {
      e.preventDefault();
        $menu.slideToggle();

    });

});
</script>

Kommentar von Carolin

Hallo nochmal,

ich stand tatsächlich auf dem Schlauch, natürlich kann ich jedem div in der jeweiligen css-Datei unterschiedliche Eigenschaften zuweisen... Sorry, zu viel gearbeitet ;-)

Viele Grüße,
Carolin

Antwort von Marco Dittmer

Hallo Carolin,

ich empfehle Dir die Verwendung von CSS Media Queries. So kannst Du abhängig von der Bildschirmgröße verschiedene Anweisungen für ein Objekt vergeben.

In Deinem Fall beispielsweise könnte dies so aussehen:

<div class="container">&nbsp;</div>

CSS:

.container {
  width: 1100px;
}

@media screen and (max-width: 1100px) {
  .container {
    width: 99%;
  }
}

Kommentar von Carolin

Hallo Marco,

danke für das tolle Skript. Ich habe damit die Weiterleitung von mobilen Surfern auf ein Verzeichnis umsetzen können, in dem sich die mobilen Webseiten als Version mit eigenem Template befinden. Natürlich wäre, auch im Hinblick auf ein evtl. Downranking durch Suchmaschinen, die Variante mit einer PHP-Datei und zwei CSS-Dateien cooler. Nur habe ich leider keine Ahnung, wie da der Code aussehen muss, wenn ich einem Container (div Container) einmal eine feste Breite und einmal 99% zuweise. Wie verschachtele ich die beiden Anweisungen? Hast Du zufällig einen erklärenden Code-Schnipsel für mich - oder stehe ich auf dem Schlauch und es ist ganz einfach?

Danke für Dein Feedback und schöne Grüße,
Carolin

Kommentar von JOBE00

<?php
// Damit die Funktion header-Location funktioniert
ob_start();
// Browsererkennungsfunktion einbinden
include('mobile_browser_funktion.php');
// Browsererkennungsfunktion abrufen
$mobile_browser = find_mobile_browser();
// Cookies setzen (Benutzer möchte zur Desktop-Ansicht wechseln, hier wird der Cookie für eine Stunde gespeichert)
if(isset($_REQUEST['sessionview_desktop']))
{
setcookie('sessionview', 'desktop', time() + 3600);
header('Location: http://ihre-domain.tld/');
}
// Cookies zerstören (Benutzer möchte doch wieder zur Mobile-Ansicht wechseln)
elseif(isset($_REQUEST['sessionview_mobile']))
{
setcookie('sessionview', 'mobile', time() - 3600);
header('Location: http://ihre-domain.tld/');
}
?>
<!DOCTYPE...> <!-- gekürzte Fassung -->
<html...> <!-- gekürzte Fassung -->
<head>
<title>...</title>
<!-- Ihre META-Angaben -->
<!-- Stylesheets (Layout) für die Mobile-Version und Desktop-Version Ihrer Internetseite -->
<?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
// Mitteilung an den Browser (speziell Opera Mobile), dass es sich um eine für Smartphone optimierte Seite handelt
echo '<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />';
// CSS für Mobile-Ansicht
echo '<link rel="stylesheet" href="mobile.css" type="text/css" media="screen" />';
}
else
{
// CSS für Desktop-Ansicht
echo '<link rel="stylesheet" href="desktop.css" type="text/css" media="screen" />';
}
?>
</head>
<body>
<?php
// Content Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
include('mobile_inhalt.php');
// Button für das Wechseln der Ansicht durch den Benutzer
if($mobile_browser)
{
echo '<a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a>';
}
}
// Content Desktop-Ansicht
else
{
include('desktop_inhalt.php');
// Button für das Wechseln der Ansicht durch den Benutzer
if($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
{
echo '<a href="'. $_GET['url'] .'?sessionview_mobile=1">Zur Mobile-Ansicht wechseln</a>';
}
}
?>
</body>
</html>
<!-- Ebenfalls für die Sicherstellung der header-Location-Funktionalität -->
<?php ob_end_flush(); ?>

So, bei euch heißt die obige Datei index.php, meine Frage ist ob ich den Code theoretisch in meine index.htm kopieren könnte und dieser dann funktionieren würde. Oder muss ich meine index.htm in index.php umbenennen, dass es klappt?

Antwort von Marco Dittmer

Hallo JOBE00,

zuallererst solltest Du Dir einmal bewusst werden, was der Unterschied zwischen PHP und HTML ist. Dieser ist entscheidend größer als nur eine Dateiendung.

Vorweg so viel: in einem HTML-Dokument funktioniert der Code nicht!

Bei PHP handelt es sich um eine Skriptsprache zur Erstellung von dynamischen Webseiten. HTML hingegen ist eine reine textbasierte Auszeichnungssprache. Mittels HTML lassen sich also einzelne Dokumente erstellen, die beispielsweise Texte und Bilder enthalten. Diese wiederum lassen sich mit Hyperlinks verknüpfen.

Der PHP-Code hingegen wird direkt auf dem Server verarbeitet. Es wird dabei nicht wie bei HTML der ganze Quelltext an den Browser des Webseitenbesuchers gesendet, sondern das vom PHP-Interpreter verarbeitete Ergebnis. Dies kann dann am Ende eine dynamisch erstellte HTML-Seite sein. In dem obigen Beispiel stellt der Server mittels des Skriptes erst einmal fest, um was für einen Zugriff es sich handelt. Greift ein Desktop-User (PC-Browser) oder ein Mobile-User (Mobile-Browser) auf die Webseite zu? Um diese Frage zu beantworten greift die index.php auf die mobile_browser_funktion.php zurück. Nachdem der Server nun den Zugriffstypen festgestellt hat, wird jeweils nur der bestimmte Inhalt ausgegeben.

In Skriptsprache wird dieser Satz nun wie folgt dargestellt: wenn Mobile-User zeige Mobile Inhalte, sonst zeige Desktop Inhalte

  • if ($mobile_browser) { echo 'Mobile Inhalte'; } else { echo Desktop Inhalte'; }

Du musst nun im ersten Schritt also erst einmal feststellen, ob Dein Server das Ausführen von PHP-Skripten unterstützt. Im Anschluss solltest Du Dich etwas ausführlicher mit PHP beschäftigen. Alternativ empfehle ich Dir die Verwendung eines Content-Management-Systems wie etwa Contao. Diese lassen sich nach entsprechender Einarbeitungszeit sehr gut bedienen und nehmen viel Programmier- und vor allen Dingen Verwaltungsaufwand ab.

Kommentar von Jürgen Ostermann

Der Weiterleitungscode war mir sehr hilfreich. Weil wir für unser Brautmoden-Geschäft unsere mobile Seite bei www.mobilonso.com erstellt haben und nun eine automatische Weiterleitung gebraucht haben. Als nächstes werden wir den Link zurück zur Desktop Seite hinzufügen. Besten Dank.

Antwort von Marco Dittmer

Ich wünsche gutes Gelingen bei der Umsetzung der mobilen Webseite!

Kommentar von Lukas

Hallo Marco

Ich weiss jetzt nicht ob mein zweiter Kommentar hier noch reinkommt. Auf jedenfall danke für den Input. Ich hab im header beide css files eingebunden. die includes rausgelöscht, weil ich ja für mobile.css wie auch für desktop.css denselben html-code verwende. sowohl HTML wie auch der ganze PHP Code ist im index.php gespeichert. Trotzdem wird mobile.css nicht so dargestellt, wie wenn ich den PHP code weglasse und das css einfach über index.html aufrufe. Woran kann das noch liegen... Danke nochmals.

Antwort von Marco Dittmer

Hallo Lukas,

bitte gehe wie in dem Blogartikel beschrieben vor:

  1. Erstelle eine mobile_browser_funktion.php und füge den entsprechenden Quellcode, also die Abfrage, ob es sich um ein mobiles Endgerät handelt, ein.
  2. Erstelle eine index.php und binde die unter Punkt 1 erstellte Datei ganz am Anfang der index.php noch oberhalb der DOCTYPE-Angaben mittels <?php include('mobile_browser_funktion.php'); ?> ein. Achte darauf, dass Du keine unsichtbaren BOM-Zeichen in der Datei hast, die diesem Teil vorangestellt sein könnten.
  3. Erstelle in der index.php den gewünschten HTML-Inhalt (Aufbau der Webseite)
  4. Binde anschließend die CSS-Dateien dynamisch in die index.php ein. Also im <head>-Bereich mittels <?php if($mobile_browser) { echo '<link rel="stylesheet" href="mobile.css" type="text/css" media="screen" />'; } else { echo '<link rel="stylesheet" href="desktop.css" type="text/css" media="screen" />'; } ?>.

Das war dann auch schon alles. Wenn dieser Teil funktioniert, kannst Du Dich an den Cookies probieren und die Funktion einbinden, dass ein mobiler User auf die Desktopn-Version der Webseite wechseln kann.

Kommentar von Lukas

Hallo Marco

Die index.php hab' ich erstellt. die includes weggelassen und beide css eingebunden. funktioniert trotzdem nicht. wenn ich jedoch die index.php wieder in eine index.html umwandle, nur das mobile css einbinde erscheint die darstellung wie gewünscht. das div für den sessionlink hab' ich als inline element angezeigt und die breite reduziert (auch dies macht keinen unterschied)...

Gruss Lukas

Kommentar von Lukas

Guten Tag

Vielen Dank für dieses Beispiel. Allerdings funktioniert das ganze bei mir nicht so. Die mobile.css wird nicht korrekt aufgerufen, so scheint es mir. Ich habe für den include zwei php dateien angelegt. mi_index.php für den mobilen inhalt und di_index.php für den desktop inhalt. Wobei die sich bei mir nicht unterscheiden. Die Unterschiede habe ich alle im CSS geregelt und wenn ich die CSS manuell einbinde (und diese in einem entsprechenden user agent ansehe) funktioniert das auch... Hat jemand eine Idee?

Antwort von Marco Dittmer

Hallo Lukas,

es ist natürlich schwierig ohne konkrete Beispiele eine aussagekräftige Antwort geben zu können. Doch wie es mir scheint, hast Du die Umsetzung bezüglich der Browserweiche und der entsprechend eingebundenen Dateien nicht ganz richtig durchgeführt.

Du benötigst zuerst einmal nur eine index.php. Diese wird ja, sofern alle Servereinstellungen korrekt vorgenommen sind, beim Aufrufen der Webseite gelesen. In diese bindest Du die Funktion der Browserweiche ein.

Weiter bindest Du im head-Bereich die Beiden css-Dateien wie beschrieben ein. Sofern Du die gesamte Darstellung der Webseite über diese css-Dateien steuern möchtest, brauchst Du im body lediglich noch Dein div-Gerüst aufbauen und mit entsprechenden ID und Klassen versehen und dann über die jeweilige css-Datei je nach aufrufenden Gerät (Client) ausgeben.

Kommentar von Break Stuff

Halli Hallo,
hab die Weiche verwendet und sie Funktioniert echt gut (Also die erkennung ob ich mit Mobile oder Desktop surfe).
Ich werde immer direkt auf die richtige Seite weitergeleitet.
Ich habe jedoch ein Problem:

Meine mobile seite ist mit dem JQuery Framework gemacht, also der ganze Quellcode steht in der mobile_inhalt.php.
Wenn ich jetzt mit dem Handy meine /Index.php ansurfe, erscheint kurz der Button zur Desktop Version wechseln und dann legt sich meine mobile Seite über diesen Button, so das er nicht mehr klickbar ist.
Könnt ihr mir sagen wie ich den Button in den Footer bekomme, anstatt hinter meine Seite?

Antwort von Marco Dittmer

Hallo Break Stuff,

wenn Du mir die Domain zu der betreffenden Seite mitteilst, so werfe ich gerne mal einen Blick darauf und gebe Dir an dieser Stelle weitere Informationen und Hilfestellungen.

Kommentar von Gis

danke für die Antwort Marco,
aber wie ich schon sagte, sind es Antworten für Leute die die Grundkenntnisse haben und eben wissen was sie tun.
Kann es nicht umsetzen.
Danke dir für deine Bemühungen.
grüssli Gis

Antwort von Marco Dittmer

Hallo Gis,

der Artikel beschreibt auch lediglich die Einbindung der Browser-Weiche und der Verwendung von Cockies, um auch die Möglichkeit zu bieten, immer die Desktop-Variante anzeigen zu lassen. Schau Dir doch einfach mal meine letzte Antwort für Thomas an. Die dort beschriebene Möglichkeit ist eine super Alternative, auch mit nur grundlegendem Wissen. Contao in Verbindung mit den RockSolid Themes, die bereits Demo-Daten mitliefern, ermöglicht einem "relativ einfach" bereits gut ausschauende, für mobile Geräte optimierte Webseiten zu erstellen. Es bedarf eben ein wenig Fleißarbeit.

Viele Grüße
Marco Dittmer

Kommentar von Thomas

Hi,

bisher habe ich nur mit html und css geabrbeitet und noch nie php angerührt, deswegen die vielleicht einfältige Frage:
Sind das völlig getrennten Welten, oder könnte ich mit einigermaßen einfachen Mitteln und einigen php-Schnipseln eine PC-Handy-Weiche basteln? Oder geht so was auch ohne php?

Vielen Dank und Grüße,
Thomas

Antwort von Marco Dittmer

Hi Thomas,

es ist nicht zwingend erforderlich eine PC-Handy-Weiche zu implementieren. Alternativ empfehle ich Dir die Umsetzung eines Responsive Webdesign. Dieses reagiert dabei auf die Ausgabegröße der Webseite. Das bedeutet, selbst wenn Du die Größe des Browser-Fensters verkleinerst oder wieder vergrößerst, passt sich die Webseite diesem an.

Jedoch ist es auch nicht gerade einfach, sich in das 12-Spalten-Grid-System einzuarbeiten. Ich weiß jetzt nicht, mit welchem System (CMS, sonstige Programme) Du Deine Webseite umgesetzt hast. Doch darf ich Dir eine Empfehlung aussprechen, bevor Du den Entschluss fasst, Dich in PHP, CSS (12-Grid, etc.) ausgiebig einzulernen:

  • Installiere das Contao Open Source Web-CMS: hier
  • Lade Dir ein ansprechendes Respnsive-Theme bei RockSolid Themes herunter (ggf. kaufen): hier
  • Als sehr gute Lektüre für Contao kann ich Dir "Websites erstellen mit Contao 3" von Peter Müller sehr empfehlen, außerdem die Hilfestellung direkt von Contao: hier, die ausgezeichnete Contao Community: hier und natürlich das kostenlose online verfügbare Contao Handbuch für Anwender & Redakteure von Nina Gerling: hier
  • Hilfestellungen zu den Themes findest Du direkt bei RockSolid Themes: hier

Natürlich ist es am Anfang immer schwer, sich in ein neues System einzuarbeiten. Doch hast Du mit den gezeigten Systemen und Tools die Möglichkeit, einen absolut modernen und wirklich frischen, für mobile Geräte optimierten Webauftritt zu erstellen. Und ganz am Rande, Contao macht Spaß!

Kommentar von Gis Volkmann

Halli Hallo,

da sich einige beklagt haben, dass sie auf dem handy zuviel scrollen müssen.... möchte ich nun gerne euer script einbauen.
Eure Erklärungen hier sind toll, für Leute, die dann noch wissen was sie tun :D

ich möchte es auch gerne vorher wissen, und bitte um eine Erklärung für Dummies ;)
z.B. verstehe ich hier nur Bahnhof:

Die Mobile-Browser-Funktion

Wir empfehlen den nachfolgenden Skriptcode in eine Funktionen-PHP-Datei (mobile_browser_funktion.php) zentral zu speichern und über den PHP-Befehl include() in die index.php zu implementieren. So können Sie auf jeder Ihrer Seiten immer wieder auf die find_mobile_browser() - Funktion zurückgreifen.

zentral speichern ? PHP Befehl include ??? wie wo mach ich das ?

so muss nun wech...
freue mich aber schon auf Hilfe
LG Gis

Antwort von Marco Dittmer

Nun Gis,

um die Umsetzung durchführen zu können, benötigst Du ein paar wenige Grundkenntnisse in PHP-Programmierung. Wie beschrieben erstellst Du eine Datei, in der Du den Quellcode mit der Bezeichnung "mobile_browser_funktion.php" einfügst. Speichere diese dann als PHP-Datei ab. Füge dann in Deine index.php folgenden Quellcode für das "includen" ein:

include('mobile_browser_funktion.php');

Kommentar von Frank

Auf meiner Homepage habe ich die Weiterleitung die ich von www.mobilonso.com erhalten habe eingefügt. Die Weiterleitung funktioniert zwar, aber zurück nicht. Muss ich wie in dem Artikel beschrieben auf Cookies zurückgreifen? Vielen Dank

Antwort von Marco Dittmer

Hallo Frank,

nun, ich kann Dir jetzt nicht genau sagen, wie die Funktionsweise von mobilonso.com ist. Persönlich würde ich auch nicht auf einen externen Anbieter zurückgreifen, um eine mobile Version der Webseite zu erstellen.

Es gibt ja einerseits die Möglichkeit, die Webseite komplett mit der Responsive Webdesign Technik umzusetzen, oder aber eben mit einer Browserweiche. Diese bietet eben dann auch die Möglichkeit des Besuchers, selbst zu entscheiden, wie er die Webseite betrachten möchte.

Meine Empfehlung aus heutiger Sicht: die Webseite definitiv responsive zu gestalten, mit der Option, die Desktop-Variante anzeigen zu lassen.

Kommentar von Deniz Bayar

Ich möchte gerne eine Lösung mit m.domain.tld Subdomain haben und da hat mir dieses Tutorial schon sehr geholfen. Vielen Dank dafür.

Die Browsererkennung und Weiterleitung funktioniert hervorragend.
Problem: Der "zum Desktop wechseln" Link funktioniert leider noch nicht.

Code ganz oben (mobile Version):
<?php
ob_start();
include('mobile_browser_funktion.php');
$mobile_browser = find_mobile_browser();

if(isset($_REQUEST['sessionview_desktop']))
{
setcookie('sessionview', 'desktop', time() + 3600);
header('Location: http://domain.tld);
}
elseif(isset($_REQUEST['sessionview_mobile']))
{
setcookie('sessionview', 'mobile', time() - 3600);
header('Location: http://m.domain.tld);
}
?>

Code im Header:
<?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{}
else
{
header('Location: http://domain.tld');
}
?>

Code im Body:
<?php
if($mobile_browser)
{
echo '<a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a>';
}
if($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
{
echo '<a href="'. $_GET['url'] .'?sessionview_mobile=1">Zur Mobile-Ansicht wechseln</a>';
}
?>

In der Desktop Version:
Ganz oben:
<?php
ob_start();
include('mobile_browser_funktion.php');

$mobile_browser = find_mobile_browser();
if(isset($_REQUEST['sessionview_desktop']))
{
setcookie('sessionview', 'desktop', time() + 3600);
header('Location: http://domain.tld');
}
elseif(isset($_REQUEST['sessionview_mobile']))
{
setcookie('sessionview', 'mobile', time() - 3600);
header('Location: http://m.domain.tld');
}
?>

Im Header:
<?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
header('Location: http://m.domain.tld');
}
else
{}
?>

Im Body:
<?php
if($mobile_browser)
{
echo '<a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a>';
}
if($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
{
echo '<a href="'. $_GET['url'] .'?sessionview_mobile=1">Zur Mobile-Ansicht wechseln</a>';
}
?>

Antwort von Marco Dittmer

Hallo Deniz,

das Beispiel von mir zeigt nicht direkt die Lösung mit Cookies für die Weiterleitung von der www-Seite zur m-Seite und zurück. Daher musst Du hier ein paar Anpassungen vornehmen.

Wenn Du auf der mobilen Seite bist (sprich mit einem Smartphone oder ähnlichem surfst), also m.domain.tpl, kannst Du die Cookies nicht über <a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a> aufrufen. Dies bedeutet doch, dass Du weiterhin auf der mobilen Domain bist. Natürlich musst Du aber dennoch die Lösung mit den Cookies verwenden, da ein einfaches Verlinken auf die www-Seite (Desktop-Seite) natürlich zur automatischen Weiterleitung zurück zur mobilen Seite zur Folge hätte.

Probiere es doch einfach mal mit <a href="www.domain.tpl?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a> aus. Somit speicherst Du den Cookie und leitest gleichzeitig zurück zur Desktop-Seite. Alle anderen Links musst Du natürlich entsprechend anpassen.

Kommentar von Maximilian Borm

Danke. Da müsste ich mich dann erst einmal reinarbeiten. Mit Cookies habe ich bisher noch nie etwas gemacht...

Aber es gibt ja (glücklicherweise) im Internet genug Seiten!

LG
Maxi
P.S.: Gerade bemerkt, dass Ihr auch aus BS seid ;)

Kommentar von Maximilian Borm

Danke!!!

An dem Menü arbeite ich noch, das wird demnächst dann auch laufen. Ich werde es wohl so machen, dass die Startseite so bleibt, aber auf den Unterseiten eine kleine Navi-Leiste oben erscheinen wird.

Die Möglichkeit zum Wechseln in die Desktop-Variante hatte ich auch schon bedacht, aber da (noch) nicht wusste, wie genau ich das realisiere, habe ich das erstmal nach hinten gestellt.

LG
Maxi

Antwort von Marco Dittmer

Die einfachste Lösung für den Wechselbutton wäre die Verwendung von Cookies.

PHP-Quellcode:
<?php
   if(isset($_POST['sessionview-desktop']))
   {
     setcookie('sessionview', 'desktop', time() + 43200);
     header('Location: DEIN ZIEL');
   }
   elseif(isset($_POST['sessionview-mobile']))
   {
     setcookie('sessionview', 'mobile', time() - 43200);
     header('Location: DEIN ZIEL');
   }
?>

Auf der mobilen Seite einbinden:
<?php
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
   echo '<input type="submit" name="sessionview-desktop" value="Zur Desktop-Version wechseln" />'."\n";
}
elseif($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
{
   echo '<input type="submit" name="sessionview-mobile" value="Zur Mobile-Version wechseln" />'."\n";
}
else {}
?>

Natürlich muss Du dann noch den form-tag <form action="" method="post" id=""> anpassen und einbinden...

Kommentar von Maximilian Borm

Ich habe mir heute auch mal eine mobile Website gebastelt. Die Tipps hier ware ganz hilfreich, und am Ende hatte ich dan eine funktionierende PHP Browserweiche ... hier erstmal die Seite (ist heute erstellt worden und wird noch verbessert) http://mobile.mborm.net . Wie findet ihr die bisher?
Ich habe das so gemacht:

function mobile_browser($useragent) {

if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) { return true; } }

if (mobile_browser($_SERVER['HTTP_USER_AGENT'])) { header('Location: http://mobile.mborm.net'); ;}

LG - Maxi

Antwort von Marco Dittmer

Hallo Maxi,

ich freue mich, dass unser Skript und Tutorial Dir bei der Erstellung einer mobilen Webseite geholfen hat. Du solltest das Menü jedoch so gestalten, dass dieses auch auf jeder Unterseite weiterhin verfügbar ist. Auch solltest Du eine Möglichkeit einbauen, die es dem Besucher ermöglicht, trotz Nutzung eines Smartphones auf die Desktop-Variante der Webseite zu wechseln.

Viele Grüße
Marco

Kommentar von Sascha Nickel

Hallo zusammen.

Da ich mit Templates Arbeite und die php seiten nicht immer neu erstellen möchte habe ich Folgende Lösung übernommen:

function find_mobile_browser()
{
   if(check_mobile_browser())
     {
     if ($_GET[\'mobile_off\'] == \'true\') {
     cookie(\'PrintVersionDesktop\', \'true\');
     return false;
   } else if ($_GET[\'mobile_off\'] == \'false\') {
   cookie(\'PrintVersionDesktop\', \'\');
   return true;
   }
}

if (($_SESSION[\'PrintVersionDesktop\'] == true) && (check_mobile_browser())) {
   return false;
   } else if ((empty($_SESSION[\'PrintVersionDesktop\'])) && (check_mobile_browser())) {
   return true;
   }
}

function check_mobile_browser()
{
  if(preg_match(\'/(alcatel|android|blackberry|benq|cell|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mobi|motorola|nokia|palm|panasonic|philips|phone|sagem|sharp|smartphone|sony|symbian|t-mobile|up\\.browser|up\\.link|vodafone|wap|wireless|xda|zte)/i\', $_SERVER[\'HTTP_USER_AGENT\']))
   {
     return true;
   } else {
     return false;
   }
}
?>

in der $template->load funktion überprüfe ich dann mittels find_mobile_browser() welcher Seitentyp angezeigt werden soll und öffne dann entweder /templates/mobile/home.tpl wenn es ein Mobiles gerät ist, oder die Normales Templates /templates/home.tpl

das Hat den Vorteil das man die PHP seite nicht neu Programmieren muss die Variablen evtl anpassen muss und nur noch das Design mittels css (auch im css Verzeichnis habe ich ein mobile verzeichnis erstellt) anpassen und evtl die Templates geringfügig anpassen.

im klartext die Links bleiben erhalten und die seiten müssen nicht neu Programmiert werden ;)

Antwort von Marco Dittmer

Hallo Sascha,

wir freuen uns, dass Du unser Skript für mobile Websites verwendest. Natürlich ist es schön zu erfahren, welche Möglichkeiten der Optimierung und Anpassung unser Skript noch bietet.

Deine Lösung lässt sich doch aber auch mit unserem Beispiel von oben umsetzen:

// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
   // CSS für Mobile-Ansicht
   ../templates/mobile/home.tpl
}
else
{
   // CSS für Desktop-Ansicht
   ../templates/home.tpl
}

Dabei wird die index.php aufgerufen und je nach Zugriffsmethode dann das entsprechende Template geladen. Dabei sollte der Besucher immer die Option erhalten, zu wählen, ob er die mobile Website oder doch lieber die Desktop-Variante besuchen möchte, bzw. angezeigt bekommen möchte. Die Inhalte sind davon in keiner Weise betroffen und müssen auch nicht parallel zu einander erstellt werden.

Sollte ich mich irren, so lasse ich mich sehr gerne eines besseren belehren.

Viele Grüße nach Speyer
Marco

Kommentar von Ultima

Das würde nun das Problem für die Mobile Version lösen aber bei der www Variante würde der else Teil der Schleife ausgeführt werden. Und dort wird durch den Header Location immer wieder eine Umleitung auf http://www.ihre-domain.tld/ gesetzt. Dort sollte auch eine Überprüfung gesetzt werden zB.:

if($_SERVER['HTTP_HOST'] === 'm.ihre-domain.tld' && !find_mobile_browser())
header('Location: http://www.ihre-domain.tld/');
elseif($_SERVER['HTTP_HOST'] === 'www.ihre-domain.tld' && find_mobile_browser())
header('Location: http://m.ihre-domain.tld/');

Schöne Grüße
Ultima

Antwort von Marco Dittmer

Hallo Ultima,

ich habe jetzt das Skript noch einmal angepasst und hoffe, dass jetzt alles passt. Vielen Dank für Deine kritische Anmerkung und somit Deinem Beitrag zur Verbesserung dieser Seite.

Viele Grüße nach Markt Schwaben
Marco

Kommentar von Ultima

In der if-else condition wird immer eine Weiterleitung gesetzt, selbst wenn ich mich schon auf der richtigen Domain befinde. Das müsste vorher noch geprüft werden, bzw. aufgeteilt werden.

Antwort von Marco Dittmer

Hallo Ultima,

ich habe den if-Teil nochmal angepasst. So müsste es doch eigentlich funktionieren:
if($mobile_browser && $_SERVER['HTTP_HOST'] != 'm.ihre-domain.tld')

Wenn ein mobiler Browser erkannt wird und sich der Besucher noch nicht auf der Zieldomain befindet, soll er weitergeleitet werden oder eben auf der www-Domain bleiben.

Kommentar von Ultima

Das erzeugt eine Endlose Weiterleitung :)

<?php
// Wieder ganz am Anfang Ihrer index.php
include('mobile_browser_funktion.php');
$mobile_browser = find_mobile_browser();
if($mobile_browser)
{
   header('Location: http://m.ihre-domain.tld/');
}
else
{
   header('Location: http://www.ihre-domain.tld/');
}
?>

Antwort von Marco Dittmer

Hallo Ultima,

ich habe den angesprochenen Code-Teil ausprobiert und dieser funktioniert einwandfrei. Sei es mit dem PC (auf http://www.ihre-domain.tld/) oder mit dem Smartphone (auf http://m.ihre-domain.tld/).

Warum sollte dieser eine endlose Weiterleitung erzeugen?