When we developed a responsive and adaptive web page back in the Making your application adaptive for enhanced usability section in Chapter 7, Enhancing Your Application, we had to deal with the possibility that the window size could be changed at any moment, and our page's contents had to relocate itself properly. With mobile devices, the screen size won't change, but you still have the possibility of a rotation (changing from portrait mode to landscape, and vice versa), so you still have to deal with at least one change. And, of course, if you want to make your app look good on all devices, it's probable that you'll have to take into account the screen size in order to decide how to accommodate your contents.

In this recipe, we'll look at a simple technique to make your application aware of different device types. This technique can be easily upgraded to also cover specific screen dimensions.