Game Development Reference
In-Depth Information
As an example application, the following code snippet detects as many touches
as the input device can handle simultaneously, keeping track of the radius of each
touch, then displaying each touch at its approximate size.
First, we need to set up the document viewport to be the same width and height as
the device as well as set initial zoom levels. We also want to disable pinching ges-
tures, because in this particular sample application, we want that gesture to act as
any other touch movement and not have any special meaning.
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
The meta viewport tag allows us to define specific width and height values for the
viewport, or use the optional device-width and device-height attributes. If only a width
or height value is specified, the other is inferred by the user agent. The tag also al-
lows us to specify a default zoom level as well as disable zooming through gestures
or other means.
Next, we need to make sure the root DOM node in the application stretches the en-
tire width and height of the display so that we can capture all touch events within it.
<style>
body, html {
width: 200%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 0;
}
div {
position: absolute;
background: #c00;
