Kijk eerst even op http://kompoos.nl/ipad/ over welke iPad pagina deze tekst gaat. Buiten dat de pagina foutloos javascript en html-code heeft, zijn er enkele nuttige zaken in de broncode verwerkt. Ik wijs even op het stukje javascript. Het is op deze manier makkelijk om elke (safari) css3 "grap" in en uit te schakelen. Ook zijn de ontouchstart en ontouchend (doelbewust) uit de html-markup gehouden. Ik neem aan dat je begrijpt dat alle "touch-events" op deze manier zullen werken. Ik geef nog even een voorbeeld van de favicon.png (voor een bookmark op de iPad) en de twee kleine graphics die op deze pagina gebruikt worden. Te weten: http://kompoos.nl/ipad/ipad.png en http://kompoos.nl/ipad/ipad-gradient-donker.png.
<!DOCTYPE html>
<html class="ipad-achtergrond" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="/favicon.png"/>
<title>ipad pagina</title>
<meta name="keywords" content="ipad,pagina,geoptimaliseerd" />
<meta name="description" content="ipad pagina. deze pagina is geoptimaliseerd voor een (safari-browser op de) ipad." />
<meta name="author" content="Bobik" />
<meta name="robots" content="noimageclick" />
<style type="text/css">
html{
background:#68705d;
height:100%}
html,body{
font-family:sans-serif;
-webkit-font-smoothing:antialiased}
.ipad-achtergrond{
background-image:-webkit-gradient(radial,40% 40%,0,40% 40%,600,from(#38705D),to(#68705D))}
h1,h2{
color:#dfd;
text-shadow:2px 2px 2px #333333}
h3,a{
color:#dfd}
#ipad_hr{
margin:0 0 100px 0;
padding:0;
border-top:1px solid #68705d;width:100%;
height:1px;
background-image:url('ipad-gradient-donker.png')}
div p{
text-align:justify;
color:#dfd;
text-shadow:1px 1px 1px #333333}
div{
display:inline-block;
outline:none;
cursor:pointer;
text-align:center;
text-decoration:none;
text-shadow:0 1px 1px #333333;
background-image:url('ipad-gradient.png');
-webkit-border-radius:0.9em;
border-radius:0.9em;
width:450px; margin-left:40px; margin-right:0; margin-top:40px; margin-bottom:0; padding-left:2em; padding-right:2em; padding-top:.5em; padding-bottom:.55em}
div p:first-line{
font-size:1.3em;line-height:2em}
#ipad_div_een{
background:url(ipad-gradient.png)}
#ipad_div_een.donker{
background:url(ipad-gradient-donker.png)}
#positie-ipad-animatie{
position:absolute;
top:42px;
left:350px}
#animeer_ipad{
padding:0.5em;
color:#cec;
font-weight:bold;
float:left;
margin:0.5em -0.45em 0 0.5em;font-size:5em;
width:1em;
-webkit-transition:-webkit-transform 1s ease-in-out}
#animeer_ipad.spinnen{
color:#ce7;
-webkit-animation:spin 0.8s infinite linear}
@-webkit-keyframes spin{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg)}}
</style>
</head>
<body >
<h1>KOMPOOS.NL</h1>
<h2>validerende iPad pagina</h2>
<h3><a href="/">home</a> » <a href="/ipad/">iPad</a></h3>
<p><strong><em><a href="/site-map-twee.html">sitemap</a></em></strong></p>
<div id="ipad_hr"></div>
<div id="ipad_div_een">
<p>
uitleg iPad pagina<br />
Zonder iPad zal het lastig worden om de animatie op deze pagina te zien.
Ipad's hebben een touch-screen, en dat hebben (de meeste) laptop's en PC's niet.
De pagina is valide HTML5. De broncode van het iPad voorbeeld staat op de pagina
<a href="/ipad/">http://kompoos.nl/ipad/ipad.html</a>.
</p>
</div>
<b id="positie-ipad-animatie">
<b id="animeer_ipad">♨</b>
</b>
<script>
/*global document: false */
document.getElementById('ipad_div_een').addEventListener('touchstart', function () {
this.className = 'donker';
}, false);
document.getElementById('ipad_div_een').addEventListener('touchend', function () {
this.className = '';
}, false);
document.getElementById('animeer_ipad').addEventListener('touchstart', function () {
this.className = 'spinnen';
}, false);
document.getElementById('animeer_ipad').addEventListener('touchend', function () {
this.className = '';
}, false);
</script>
</body>
</html>