Chapter 4. More Responsive Design

One very common question asked about Cordova and PhoneGap is how does one properly handle different screen sizes? Unfortunately, this question is often asked when it's already very late in the development process, at which point it is difficult to introduce the appropriate fixes into the code. The developer has built the app with hard-coded sizes, usually ignoring aspect ratio differences, and any fix is now expensive to implement. As such, it is critical to implement your app such that it responds to the size of your user's device from the very start of your app's development.

HTML is naturally responsive, but it's easy to break this natural responsiveness if you use pixel-based origins and sizes. As long as you avoid these pitfalls where possible and use percentages and absolute and relative positioning, your app will naturally scale to whatever screen it finds itself on. The results may not be what you desire (too much whitespace or too cramped), but these can be easily solved using CSS.

Images aren't so easy: it's one thing while dealing with an icon—it's apt to be the same size and shape on any device, but it is a very different thing when we're dealing with background images or images that fill the width or height of the screen. Images are very sensitive to aspect ratio, and it's usually immediately obvious to the viewer when an image's aspect ratio isn't quite right. CSS3 provides mechanisms that help us here as well.

In this chapter, we'll be covering the following:

• Pixel densities
• CSS3 units, including the rem and viewport units
• Media queries
• Image sizing
• Flex-box