HTML and CSS Reference
In-Depth Information
<! iPad/iPhone specific css below, add after your main css >
<link rel "stylesheet" media "only screen and (max device width: 1024px)"
href "ipad.css" type "text/css" />
<link rel "stylesheet" media "only screen and (max device width: 480px)"
href "iphone.css" type "text/css" />
>
Die nächste JavaScript-Funktion ist besonders wichtig, wenn Sie Ihre Anwendung so
gestalten möchten, dass der Benutzer den Inhalt nicht nach oben oder unten verschie-
ben kann. In der
index.html
-Datei ist die Funktion auskommentiert, also nicht wirksam.
Entfernt man die Kommentare, erhält man nicht nur folgenden Code, sondern auch das
entsprechende Verhalten:
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
Ohne die
preventBehavior()
-Funktion kann der Benutzer mit dem Finger den in der
App angezeigten Inhalt nach oben und nach unten ziehen. Das wird notwendig, wenn
Sie eine Anwendung gestalten, deren Inhalt über die normale Bildschirmdimension
hinausgeht.
Bild 3.27:
Ohne die
preventBehavior()
-Funktion.
Mit der
preventBehavior()
-Funktion kann der Benutzer lange versuchen, den Bild-
schirm mit den Fingern nach oben oder unten zu bewegen, es wird ihm nicht gelingen.
Bedingung für eine gute Bedienung: Alle Bildschirmelemente der Anwendung müssen in
die Bildschirmdimensionen passen.
