Using max-device-width

Contact Us or call 1-877-932-8228
Using max-device-width

Using max-device-width

We'll now use media queries to target the properties of the device being used to view our page. The property max-device-width allows us to target the physical properties of the viewport - max-device-width: 480px, for instance, applies not when the browser window is resized to less than 480px, but rather when the device itself - a smartphone, say - has a viewport less than 480px wide.

To view your code on a smartphone or emulator, you will need to publish to a Web server; please refer to the setup instructions for more information on how to do this.

Consider the file MediaQueries/Demos/devicewidth.html. View this latest version of the Jazz Calendar home page on an iPhone, Android, or other smartphone device or on an emulator - you'll see that we've used media queries to selectively apply style rules just for devices with a maximum viewport width less than 480px:

Jazz Calendar site - iphone view

  1. The top nav is listed vertically, with some extra top/bottom padding and bottom borders.
  2. As on the small-width browser design, we don't float the sidebar right - rather, it slides under the main content area.
  3. Similarly, the gig listings appear one-on-each-line, rather than two-across, and with a black border at bottom.