Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 7 CREATING RESPONSIVE WEB APPS};}});}deviceConfig.largeScreen = ko.computed(function() {return !deviceConfig.smallScreen();});setInterval(function() {deviceConfig.smallScreen(window.innerWidth window.innerHeight);}I have found comparing the innerWidth and innerHeight values of the window object to be the mostreliable way of figuring out the screen orientation. The screen.width and screen.height values shouldwork, but some browsers don’t change these values when the device is reoriented. Thewindow.orientation property provides good information, but it isn’t universally implemented. This is anundoubted compromise, and I recommend you test the efficacy of this approach on your target devices.The rest of the additions implement the various means by which the setOrientation will be called:via the orientationchange and resize events, via a media query, and via polling. Judging the rightfrequency to poll the orientation is difficult, but I usually use 500 milliseconds. It isn’t always asresponsive as I would like, but it strikes a reasonable balance.• Tip I could have used a single setInterval call to poll for both the screen size and the orientation, but I preferto keep the regions of code functionality as separate as possible.Integrating Screen Orientation into the Web AppI can make the web app respond to the screen orientation now that the view model has the portrait andlandscape items. To demonstrate this, I am going to fix a problem: the web app currently requires theuser to scroll down to see all of the elements in landscape mode on a device that has a small screen.Figure 7-5 shows the problem and the result after I have modified the web app layout.186www.it-ebooks.info