Firefox OS Media Query
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.
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Instagram For MooTools]()
If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram. With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...
![Fix Anchor URLs Using MooTools 1.2]()
The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...
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.
Yes, building a site that looks good everywhere is still the key, but knowing the media query that targets those devices is still important. :)