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.
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![MooTools Star Ratings with MooStarRating]()
I've said it over and over but I'll say it again: JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...
![The Simple Intro to SVG Animation]()
This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery.
An SVG element is a special type of DOM element...
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. :)