In this lesson, we address a shortcoming of our previous work: images (and other elements with a fixed width) didn't scale when we converted pixel-width elements to flexible, percentage-based widths - and thus break the design. We learn how to scale images.
In this lesson, we'll look first at the viewport tag, which allows us to scale content for various viewport widths. We will also learn how CSS3 media queries offer fine control over style rules, allowing us to target differing browser widths and device widths to change the manner in which we present content.
iPhones, Android phones, and other devices offer users the ability to add a shortcut/bookmark to a Web page on their home screen; our job as developers is to provide a custom icon that best represents our site or page. Including some code in the head of each page or including a specifically-named icon in the website's root directory provides the functionality on iPhones and iPads; similar strategies work on Androids and other phones.