APPENDIX
Exercise Solutions
CHAPTER 1
1. In the view.html file, replace this line:
tapper.onclick = function() {
with this:
tapper.ontouchstart = function() {
Reload the app in your mobile browser. Tapping still works, and the color changes.Reload the app in your desktop browser. You’ll notice that clicking no longer works, and the app only responds to touch events.
2. Add an onresize event handler to the JavaScript:
window.onresize = function() {
var tapper = document.getElementById('tapper');
var landscape = window.innerHeight < window.innerWidth
tapper.style.width = ( landscape ? 400 : 300 ) + 'px';
tapper.style.height = ( landscape ? 200 : 300 ) + 'px';
}
This code first obtains a reference to the tapper div in the usual way, using getElementById. Then it determines whether the mobile device is in landscape orientation by comparing the window width and height. If the window is shorter than it is wide (height < width), then the device must be on its side, in landscape mode.
The code then sets the width and height style values, using the convenient conditional evaluation syntax (<test> ? <test is true> : <test is false>).
3. When you scroll up, the mobile device browser automatically hides the address bar. You can use this behavior to force the address bar to disappear. Even if you scroll up by one pixel, it will still work.
However, it is not quite so simple. First, you need to ensure that the page is in fact scrollable, so you give the page a large height:
<style> ...
