Mit vielen Plugins und schlüsselfertigen Lösungen kann jeder Webmaster den Switch einfach umlegen und das mobile Theme für seine Website aktivieren. Das Problem ist, wie kann der Webmaster herausfinden, wie seine Seite auf einem mobilen Gerät aussieht, wenn er kein Smartphone besitzt? Mit ein wenig Tricks können Sie Ihren Desktop-Browser problemlos verwenden, um auf Ihre Website zuzugreifen und zu glauben, dass Sie einen mobilen Browser verwenden.

Jeder Browser verfügt über einen eigenen User-Agent. Die meisten Server verwenden den Benutzer-Agent des Browsers, um festzustellen, woher der Benutzer stammt, und die Webseite entsprechend zu bedienen. Wenn festgestellt wird, dass der Benutzer einen mobilen Browser verwendet, wird das mobile Theme bereitgestellt (sofern das mobile Theme aktiviert ist). Indem Sie den Benutzer-Agent Ihres Desktop-Browsers in den eines mobilen Browsers ändern, können Sie den Server glauben machen, dass Sie ein mobiles Gerät verwenden.

Mobiles Thema in Firefox anzeigen

In Firefox empfehle ich das User Agent Switcher Addon, da es mit dem iPhone User-Agent vorinstalliert ist und Sie können einfach zu diesem wechseln.

Nachdem Sie die Erweiterung installiert und Ihren Firefox neu gestartet haben, gehen Sie zu " Extras -> Standardbenutzeragent -> iPhone ".

Aktualisieren Sie jetzt auf Ihrer Website und Sie sollten das mobile Thema in Aktion sehen.

Um den Android- Agenten zur Liste hinzuzufügen, gehen Sie zu " Extras -> Standardbenutzeragent -> Benutzeragenten bearbeiten ".

Klicken Sie auf die Schaltfläche "Neu -> Neuer Benutzeragent" und geben Sie Folgendes ein:

Beschreibung : Android
Benutzeragent : Mozilla / 5.0 (Linux; U; Android 2.2; de-de; Nexus One Build / FRF50)
AppleWebKit / 533.1 (KHTML, wie Gecko) Version / 4.0 Mobile Safari / 533.1

Die restlichen Einträge können Sie auf dem Standardwert beibehalten.

(Für iPad ist der Benutzer Agent Mozilla / 5.0 (iPad; U; CPU OS 3_2 wie Mac OS X; en-us) AppleWebKit / 531.21.10 (KHTML, wie Gecko) Version / 4.0.4 Mobile / 7B334b Safari / 531.21 .10 )

Die nächste Erweiterung, die Sie verwenden werden, ist Firesizer. Mit dieser Erweiterung können Sie die Größe Ihres Browsers auf eine bestimmte Bildschirmauflösung ändern, damit Sie sehen können, wie Ihre Site auf einer anderen Bildschirmgröße gerendert wird.

Nach der Installation finden Sie die Größenanpassungsoption in der rechten unteren Ecke des Browsers. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Anpassen.

Sie können der Liste eine neue Bildschirmgröße hinzufügen. Als ihre referenz:

iPhone 4 hat eine Bildschirmauflösung von 960 x 640 (H für W, also sollten Sie 640 x 960 eingeben)
iPhone 3GS und darunter hat eine Bildschirmauflösung von 480 x 320 (H von W, so sollten Sie 320 x 480 eingeben)
Nexus One (Android) hat eine Bildschirmauflösung von 800 x 480 (H für W, also sollten Sie 480 x 800 eingeben)

Sobald Sie die Bildschirmauflösung hinzugefügt haben, können Sie Ihre Website jetzt in ihrem mobilen Format und in der richtigen Bildschirmgröße direkt auf Ihrem Desktop-Browser anzeigen.

Hinweis : Die obigen Addons funktionieren nur in Firefox 3.6. * Und darunter. Sie sind nicht kompatibel mit Firefox 4 Beta.

Die obigen Tricks können in anderen Browsern wie Opera und Safari wiederholt werden. Google Chrome erlaubt es Ihnen nicht, den User-Agent zu ändern (Sie können diesen Hack allerdings auch auschecken), so dass Sie die oben genannten Tricks nicht verwenden können.

Wie testen Sie Ihr mobiles Theme?