Don’t Use min-width Media Queries

miqrogroove
2012-03-16T01:31:24+00:00
Opera Mini Screen Shot

Mobile Friendly

Two weeks ago, I tried to point out a shortcoming of example CSS code over at the Opera.com website.

The point in question was the use of the “min-width Media Query” which I felt was incompatible with Internet Explorer.

Since this is tricky to describe without drawing a picture, I decided to set up a few sample web pages here to serve as a live demonstration of the problem.

The demo is: My min-width Media Query Test Case

For readers uninterested in the demo or the raw code, I am providing a set of screen shots below to fully illustrate the results.

My scenario begins with a page that looks fine in most browsers, but renders poorly in Opera Mini, a mobile web browser.

In an attempt to make the page mobile friendly, I used the min-width CSS media query to cause Opera Mini to ignore parts of the code.  Unfortunately, this rendered poorly in Internet Explorer 8 and older versions.

The solution is to not use the min-width query. ¬†Instead, the CSS code from the original page is restored, and a max-width (instead of min-width) query is used to “undo” all of the code on any compatible browser, such as Chrome or Opera Mini. ¬†Internet Explorer sees only the original code, thus it is not adversely affected by the max-width query.

Worst Case max-width
Chrome Google Chrome screen shot Google Chrome screen shot
Internet Explorer Internet Explorer Screen Shot Internet Explorer Screen Shot
Opera Mini Opera Mini Screen Shot Opera Mini Screen Shot

 

 

16 Mar 2012

Category:
Systems Engineering

Tags:

Discuss:
Comments Go Here

Write a Comment