Webseiten für Mobile-Browser optimieren

1. Skalieren einstellen (bzw. vermeiden)

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

2. Verweise mit "display:block" großflächig als Zeile anzeigen

Ohne (CSS)-Formatierung sehen folgende Verweise so aus --> erster LINKTEXT, noch ein LINKTEXT

LINKTEXT LINKTEXT (noch ne Zeile) LINKTEXT (Zeile mit hover-Farbänderung)
style="display:block;border:1px solid #aaa;color:#444;font-weight:bold;padding:10px 10px;text-decoration:none;background-color:#ccc;"

3. optional Ecken der ersten und letzten Zeile abrunden

LINKTEXT 1. Zeile LINKTEXT LINKTEXT letzte Zeile
#id-name li:first-child a{        border-top-left-radius:10px;           border-top-right-radius:10px;}
#id-name li:first-child a{-webkit-border-top-left-radius:10px;   -webkit-border-top-right-radius:10px;}
#id-name li:last-child a{ border-bottom-left-radius:10px; border-bottom-right-radius:10px;} #id-name li:last-child a{-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}

4. In Abhängigkeit von der Bildschirmauflösung (spezielle CSS-Datei laden)

<link rel="stylesheet" type="text/css" media="     screen and (min-width:961px)" href="desktop.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width:960px)" href="mobile.css">
Alternativ können die Abfragen "media queries" direkt in CSS eingebettet werden
@media(only screen and max-width:480px){
/*mobile style goes here*/
}
@media(only screen and min-device-width: 481px and max-width:960px){
/*tablet style goes here*/
}
@media(only screen and min-device-width : 768px and max-device-width : 1024px){
/*tablet style goes here*/
}
@media(only screen and min-width: 961px){
/*desktop style goes here*/
}
siehe:
- https://www.w3.org/TR/css3-mediaqueries/
- http://alolsen.net/blogs/webdesign/css/responsive-web/
- http://getbootstrap.com/css/

5. oder in Abhängigkeit vom Browser eine spezielle css-Datei laden

<link rel="stylesheet" type="text/css" href="iphone.css" title="Iphone-Bildschirm" media="only screen and (-webkit-min-device-pixel-ratio:2)">

6. clientseitig den Browser abfragen und umleiten

<script type="text/javascript">
// Folgezeile liefert (nur zu Testzwecken) den aktuellen User-Agent
// aktuell -->  )
document.write(navigator.userAgent);
if( (navigator.userAgent.match(/Phone/i)) ||
    (navigator.userAgent.match(/Mobile/i)) ||
    (navigator.userAgent.match(/iPod/i)) ||
    (navigator.userAgent.match(/Android/i)) ) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1)
      window.location = "http://mobile.firma.de/";
    }
</script>

7. oder serverseitig mit folgender .htaccess Datei

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*Phone.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*Mobile.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*iPod.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteCond %{REQUEST_URI}  .*/$
RewriteRule ^(.*) http://mobile.%{SERVER_NAME}/ [L,R]

RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (Phone|Mobile|iPod|Android) RewriteCond %{REQUEST_URI} .*/$ RewriteRule ^(.*) http://%{SERVER_NAME}%{REQUEST_URI}index-mobile.html [L,R]

8. oder als PHP-Datei

if( strstr($_SERVER['HTTP_USER_AGENT'],'Phone') ||
if( strstr($_SERVER['HTTP_USER_AGENT'],'Mobile') ||
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ||
if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') ){
 header('Location: http://mobile.firma.de/');
 exit();
}