permalink

0

Mobile Webseiten wie Apps aussehen lassen (für iPhone und iPad)

Mit ein paar Zeilen HTML-Code könnt ihr Web-Seiten auf dem iPhone & dem iPad mehr nach echten Apps aussehen lassen. Ihr könnt zum Beispiel ein Home Screen Icon und einen Splash Screen definieren oder die Statusbar dunkel einfärben.

Hier die HTML,CSS & Javascript Code-Schnipsel dazu, liebe Zielgruppe:

Full Screen Mode (when run as a web app)
<;meta name="apple-mobile-web-app-capable" content="yes" />;

Seite passend skalieren
<;meta name="viewport" content="width=device-width, initial-scale=1" />;

Seite passend skalieren & Zoomen ausschalten
<;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />;

Statusbar in schwarz (halb transparent)
<;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />;

Home Screen Icon
<;link rel="apple-touch-icon" href="touch-icon-iphone.png" />;
<;link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />;
<;link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />;

(57×57 = iphone3, 114×114 = iphone4, 72×72 = ipad)

Home Screen Icon (nicht glossy)
<;link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />;

Splash Screen
<;link rel="apple-touch-startup-image" href="startup.png" />;

(320 x 460 = iphone, 1004×768 = ipad)

Das Kontextmenü für Links deaktivieren
<;style type="text/css">;
<;!—- * { -webkit-touch-callout: none; } -->;
<;/style>;

Den Rand um Links ausblenden
<;style type="text/css">;
<;!—- * { -webkit-tap-highlight-color: rgba(0,0,0,0); } -->;
<;/style>;

…und Text nicht mehr automatisch skalieren
<;style type="text/css">;
<;!—- * { -webkit-text-size-adjust: none; } -->;
<;/style>;

Wer von euch jetzt noch die Browser Bar ausblenden will, dem kann ich ein paar Zeilen Javascript von Scott Jehl empfehlen.

Safari Web Content Guide: Configuring Web Applications

Similar Posts:

Kommentar verfassen