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 David Walsh on November 18, 2013

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.

Recent Features

By David WalshFebruary 18, 2013
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
By David WalshNovember 7, 2012
Camera and Video Control with HTML5
Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API...

Incredible Demos

By David WalshNovember 29, 2012
CSS :target
One interesting CSS pseudo selector is :target. The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash. Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...
By David WalshFebruary 18, 2013
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...

Discussion

Š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. :)