Spezielles Design für Smartphones + das Mobile-Touch-Icon

Mit angepasstem CSS für Smartphones (und dergleichen) lassen sich die Internetseiten dem kleinen Format eines Mobilgerätes entsprechend anders darstellen.

Fügt man am Ende der Haupt-CSS-Datei einen Teil nur für Smartphones (Mobile Endgeräte im Generellen) ein, die die Standardangaben überschreiben, so kann man das Aussehen seiner Internetseiten dem kleinen Format eines iPhones z.B. sehr gut anpassen. Das kann z.B. dann so in etwa aussehen:

/*START:mediaquery */
@media only screen and (max-device-width: 960px) {
  body{ font-size:18px; } /* Schrift etwas größer setzen */
 
  div#page1, div#page2 {
    width:960px;
    left:5px;
    margin:0;
    background:#fff;
  }
/* und so weiter ... */
}
/*END:mediaquery */

Als Beispielanwendungen können Sie sich die Seiten von Seideldesign Mainz, Maaßen Tiefbau oder von kupix webdesign mal auf Ihrem Smartphone ansehen (die einzelnen Spalten stehen z.B. untereinander).

In TYPO3 kann man aber auch per conditions eine eigene CSS einbinden. Dadurch wird die Standard-CSS nicht unnütz aufgebläht:

[device = pda,wap] || [useragent = *iPhone*] || [useragent = *Mobile*]
    page.includeCSS {
       file20 = {$cssPath}smartphone.css
       file20.media = screen
    }
[GLOBAL]

Weiterhin kann man für die Darstellung in Smartphones ein eigenes, sogenanntes Mobile-Touch-Icon erstellen. Dieses Icon muss den Namen apple-touch-icon.png haben und darf nur 114 x 114 Pixel groß sein. Ein solches Icon wird dann im Smartphone oder iPad als App-Icon mit den runden Ecken dargestellt. Die runden Ecken muss man bei der Erstellung nur berücksichtigen dahingehend, dass man in den Ecken des Icons keine wichtigen Bildelemente platziert.

Durch den Befehl

<link rel="apple-touch-icon-precomposed" href="http://kupix.de/apple-touch-icon.png" />

im Header der Webseite wird es gem. Gerätetyp dem Smartphone bekannt gemacht. Die Pfadangabe muss vollqualifiziert sein (inkl. Domain) und im rel-Attribut muss "precomposed" stehen, da es sonst von Android-Systemen nicht erkannt wird.