HTML and CSS Reference
In-Depth Information
scroll the window and recalculate the
innerHeight
. Change the top of the
handleResize
method to read
as follows:
var touchDevice = !!('ontouchstart' in document);
var handleResize = function() {
var w = window.innerWidth, h = window.innerHeight, newDim;
// Make sure the content is bigger than the page.
if(w <= maxWidth && touchDevice) {
$("#container").css({height: h * 2});
}
window.scrollTo(0,1);
// Get the height again, scrollTo may have changed the innerHeight
h = window.innerHeight;
You want to do this container resize trick only on browsers that support touch events because other ones
(such as normal desktop browsers) scroll normally. Adding a bunch of additional empty space just adds unne-
cessary scrollbars that make the page scroll around. For this reason, the variable
touchDevice
is set to either
true
or
false
depending on whether the
document
object supports the
ontouchstart
event.
Finally there's one more subtlety to deal with regarding resizing. iOS doesn't currently fire a resize event
when the device changes orientation from vertical to horizontal (portrait to landscape), so to handle the resize in
that situation, you need a different event to bind to:
orientationchange
. You can use the
touchDevice
check from earlier to decide which event to listen to. Replace the preceding resize event above
handleRes-
ize
with the following:
var resizeEvent = touchDevice ? 'orientationchange' : 'resize';
$(window).on(resizeEvent,handleResize);
The code now determines whether to listen to
resize
or to
orientationchange
events.
Listing 6-2
shows the full code with all the mobile-specific adjustments described earlier for reference:
Listing 6-2:
addressbar.html—A resizing Canvas with mobile adjustments
<script>
// Wait for document ready callback
$(function() {
var maxWidth = 480;
var maxHeight = 480;
var initialWidth = $("#game").attr('width');
var initialHeight = $("#game").attr('height');
var touchDevice = 'ontouchstart' in document;
var handleResize = function() {
var w = window.innerWidth, h = window.innerHeight, newDim;
// Make sure the content is bigger than the page.
if(w <= maxWidth && touchDevice) {
$("#container").css({height: h * 2});
}
window.scrollTo(0,1);