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();
}