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.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Fancy Navigation with MooTools JavaScript]()
Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect.
The XHTML
Just some simple...
![Fixing sIFR Printing with CSS and MooTools]()
While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...
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. :)