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);
 
 
 
Search WWH ::




Custom Search