Chapter 5. Making Mobile-first Web Applications
In this chapter, you will learn about:
- Using the Safari Developer Tools' User Agent switcher
- Masking your user agent in Chrome with a plugin
- Using browser resizing plugins
- Learning the viewport and its options
- Adding tags for jQuery Mobile
- Adding a second page in jQuery Mobile
- Making a list element in jQuery Mobile
- Adding a mobile native-looking button with jQuery Mobile
- Adding a mobile stylesheet for mobile browsers only using the media query
- Adding JavaScript for mobile browsers only
Introduction
In this chapter, we will focus our efforts on mobile-first Responsive Design. By this, we mean first designing your site for the mobile device, and then applying variation or even a wholly different look for the desktop. We'll cover a few recipes on jQuery Mobile, a free and open source library of mobile UI elements and widgets. In addition, we'll build some client-side scripting to handle a unique look only for mobile devices.