Course notes 37
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Useful Bits of Code for Mobile Development

Meta Tags

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

will run the web page chromeless (without the address bar) when accessed from the home screen

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

changes the top iOS info bar to black.

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

sets the viewport to equal the device size, and resets the scale

CSS

* {
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
}

add these CSS properties to the universal selector to remove some default behavior which could get in your way. They resolve text selection, highlighting, and zooming issues.

Javascript

document.ontouchmove = function(e) {
    e.preventDefault();
}

This block stops safari's elastic behavior where it lets you drag the page around. Notice that what is happening is the default behavior is being stopped for all touchmove events originating from the document.This will not interfere with your own listeners as long as the third parameter is set to false.

window.orientation

You can check against this value to determine the current orientation of the device. 0 = portriat, 90 or -90 = landscape

window.addEventListener('orientationchange',...)

-or-

window.addEventListener('resize',...)

Use this listener to react when a user rotates the device. If the first option does not appear to be working, try using the second.

Separate Touch and Click Events

function touchCallback(e) {
	e.preventDefault();
	e.stopPropagation();

	...
}

If you have touch and click event listeners for the same target, make sure to add the above two lines to the callback function of the touch event. Normally a touch event will also fire a click event after it has executed, the above two lines prevent this.


Click here to see an example of a fullscreen slider app
View the source code to see how it is done.


HTML 5 Audio

Currently, HTML5 audio integration is a work in progress due to lack of reliable browser support. There are still however, useful ways to implement the <audio> tag into web pages. For a detailed explanation of the new code, refer to http://www.w3schools.com/html5/tag_audio.asp

Example of implementing a sound effect:

1. Add an audio element to the body of your page. Be sure to include an ID and to preload the sound.
<audio id="audio1" src="mySound.wav" preload="auto"></audio>

2. In the head of your page, add a line of javascript to a function that should play the sound.
document.getElementById('audio1').play();