Die Anpassung von Elementen an unterschiedliche Bildschirmbreiten kann bequemer über einen normalen Browser getestet werden als über einen Emulator. Das erspart einem den zwar nicht, doch die Testzeit darauf kann wesentlich verkürzt werden. Zudem habe ich über meinen Desktopbrowser Zugriff auf sämtliche Webanalysetools und kann so etwaigen Anpassungsverweigerungen (auch wenn sie sich erst im Emulator oder mobilen Endgerät zeigen) schnell auf die Spur kommen.
Einem Theme das mobilen Endgeräten über eigene Stylesheets entsprechen soll, verpasse ich einen CSS-Switch, der jedoch nur unter der Bedingung verfügbar sein soll, dass ich mich auf dem lokalen Testgerät befinde (alternativ zum Computernamen wie bei mir, kann natürlich auch eine Test-URL abgefragt werden).
Voraussetzungen
- Es ist jeweils ein eigenes Styleshett für die unterschiedlichen Gerätetypen (desktop.css, tablet.css, phone.css) vorgesehen.
- Bei Verwendung von Mediaqueries gegenbenfalls min-device-width und max-device-width in dieser Phase durch min-width und max-width ersetzen. Anschließend Zurückstellen nicht vergessen. Wer ausschließlich Mediaqueries innerhalb einer einzigen CSS-Datei verwendet, kommt damit schon aus.
- das Beispiel bezieht sich auf WordPress-Theming
Die Session (Anfang functions.php)
if ($_SERVER['COMPUTERNAME'] == 'NAMEDESTESTCOMPUTERS') :
session_start();
if(isset($_GET['phone'])) {
$_SESSION['deviceset'] = 'phone';
}
if(isset($_GET['tablet'])) {
$_SESSION['deviceset'] = 'tablet';
}
if(isset($_GET['desktop'])) {
$_SESSION['deviceset'] = 'desktop';
}
if(!empty($_SESSION['deviceset'])) $deviceset=$_SESSION['deviceset'];
endif;
Die Stylesheets einbinden (functions.php)
/* der ansonsten anhand der Geräteerkennung wirksame CSS-Switch */
function device_design_style() {
global $deviceset, $device;
if ($deviceset) $device = $deviceset;
wp_register_style( 'device-style', get_template_directory_uri() . '/css/' . $device . '.css', array(), '20120802', 'screen' );
wp_enqueue_style( 'device-style' );
}
add_action('wp_enqueue_scripts', 'device_design_style' );Die Umschalter (header.php, an geeigneter Stelle)
<?php
if ( $_SERVER['COMPUTERNAME'] == 'NAMEDESTESTCOMPUTERS' ) :
<ul class="choosedevice">
if ( $device=='phone') { ?>
<li><a class="device" id="tablet" title="auf Tabletansicht umschalten" href="?tablet">Tabletansicht</a></li>
<li><a class="device" id="desktop" title="auf Desktopansicht umschalten" href="?desktop">Desktopansicht</a></li>
<?php } elseif ( $device=='tablet') { ?>
<li><a class="device" id="phone" title="auf Phoneansicht umschalten" href="?phone">Phoneansicht</a></li>
<li><a class="device" id="desktop" title="auf Desktopansicht umschalten" href="?desktop">Desktopansicht</a></li>
<?php } else { ?>
<li><a class="device" id="phone" title="auf Phoneansicht umschalten" href="?phone">Phoneansicht</a></li>
<li><a class="device" id="tablet" title="auf Tabletansicht umschalten" href="?tablet">Tabletansicht</a></li>
<?php } ?>
</ul>
<?php endif; ?>