Archive for the CSS Tag

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.

Read the rest of this entry »

16 Mar 2012

Category:
Systems Engineering

Tags:

Discuss:
Comments Go Here