KOMPOOS.NL

meta's voor de iPad

home » ipad » ipad-ipod-meta.html

uitleg over de iPad meta's

<meta name="apple-mobile-web-app-capable" content="yes">

Als je de waarde van apple-mobile-web-app-capable op "yes" zet, zal de pagina op fullscreen "draaien". Met een stukje javascript kan je de full-screen-mode checken. Zie onderstaande code:


<script>
if(window.navigator.standalone) {
    alert("full-screen");
} else {
    alert("chrome-bar is zichtbaar");
}
</script>

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Met een apple-touch-icon kan je een icoon aangeven voor een snelkoppeling (op de iPad). Het icoon is een PNG van 72px bij 72px (althans voor de iPad). Apple voegt aan de icon een glossy effect toe. Wil je dat niet, dan verander je de link in:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

<meta name="format-detection" content="telephone=no">

Schakel de automatische bel-link uit.

<meta name="apple-mobile-web-app-capable" content="yes" />

Schakel de "knoppen-bar" en de "url-bar" uit. Geen chrome-bar toegestaan.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Regel dat de "phone-status-bar" zich "gedraagt"...

<meta name = "viewport" content = "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

verschillende meta's kunnen gecombineerd worden: hieronder de uitsplitsing en betekenis.

<meta name="viewport" content="user-scalable=no, width=device-width" />

Schakel de mogelijkheid om te "schalen" uit. Het scherm kan nu niet meer vergroot of verkleind worden.