In diesen Artikel wollen wir euch helfen eine mobile
Webseite für iphone zu erstellen, Schwerpunkt Meta Tags für die für mobile Webseiten, Wep Apps für iphone zu beachten sind und welche Möglichkeiten es gibt.
1. Mobile Meta Tags
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Der Metatag viewport gibt an in welcher Auflösung der Bowser die Webseite rendern soll Oder mit einer festen Bereite arbeiten sieht der Meta-tag so aus.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
2. Bestimmen der CSS-Datei für unsere Mobile Version
Durch die Meta-Angabe max-device-width: 450px sagen wir das die Besucher, mit einer max. Auflösung von 450 Pixeln sich diese CSS-Datei nehmen soll.
<link rel="stylesheet" media="only screen and (max-device-width: 450px)" href="mobile-style.css" type="text/css" />
3. spezifische iPhone Meta Tags – Icons - Cleartype – Bar
Hier Meta Tags die für iphone sehr nützlich sind wie Icons oder die Mobile Bar. Die Icon Tags sind z.B bei einen Bookmark nimmt das iPhone, iPad und iPod jetzt das ausgewählte Icon, und kein Screenshoot der aktuellen Seite.
//Meta Tag für Cleartype
<meta name="HandheldFriendly" content="True">
//Meta Tag für Mobile Content Größe
<meta name="MobileOptimized" content="320">
//Meta Tag für Cleartype
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon" size="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" size="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" size="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" size="57x57" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="/images/apple-touch-icon.png" >
Bei den Tag “apple-touch-startup-image” ist die Grafik die bei Ladezeit der Webseite angezeigt wird.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
4. Mobile HTML Doctype
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
Ich denke ich habe alles was an mobilen Meta Tags wichtig ist aufgelistet, falls ihr nützliche iphone Entwickler Tipps habt einfach kommentieren.
Share and Enjoy