Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Firefox OS Media Query

By  on  

Firefox OS is an awesome new HTML5-based mobile operating system.  Some would says it's epic, I just think it's...super epic.   The "native" languages are HTML, CSS, and JavaScript -- it's enough to make a Web Developer weep.  Anyways, it's important to know how to target currently released Firefox OS devices with CSS media queries.  Here's how!

The CSS

The Firefox OS base media query (for popular released devices) is actually that of a common small mobile phone:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	
	/* styles go here */
	
}

This media query accommodates for both landscape and portrait views of released Firefox OS devices.

As Firefox OS is ported to watches, tablets, and other devices, you'll need to keep accommodating other media queries, as you should already.  Keep in mind that Firefox OS doesn't have set dimensions, but this will cover to released phones to this point.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    Spyjax: Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

Discussion

  1. Šime Vidas

    But why *would* you target Firefox OS? It seems to me that the best approach is to build a web app that works great across all viewport widths. It’s useful to know which MQ widths are currently used on Firefox OS devices, but hard-coding it into the CSS? I don’t know.

    • David Walsh

      Yes, building a site that looks good everywhere is still the key, but knowing the media query that targets those devices is still important. :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!