CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Demetrio M.
Demetrio M.

Reputation: 207

Media query support in older mobile browsers is sketchy what can I do about it?

So I just found out that media queries are not supported in a large percentage of older mobile browsers. (source: book implementing responsive design). For instance the book says that 92% of Android users are browsing using Android v2.3 or earlier.. The current version is v4.x.

So I'm curious how to optimize for those users. Say I put the <meta name=”viewport” content=”width=device-width” /> in the head, since those browsers don't understand the following media queries, wouldn't they then just display a small fraction of the "desktop" layout (say 200px of the default 960px layout?)..

So I'm wondering if there would be anyway to remove the viewport metatag if the device doesn't support media queries so they can at least have the default desktop experience in those older browsers, any suggestions? Thanks.

Upvotes: 2

Views: 343

Answers (1)

Ryan
Ryan

Reputation: 5682

Your book is out dated, see this chart here for more up to date information.

To sum up quickly though 5.5% of android users are browsing with something less then 2.3 (5.6% if you count the first patch of 2.3).

After the patch in 2.3 the browser on those phones is really pretty decent, I would target that and above since this will cover 94.4% of all Android phone users.

Also if you check this chart here you will see that support for actual css media queries goes all the way back to the android browser 2.1. (which means that 99.9% of users on android can see basic media queries)

Also if you look at these reports:

You will see that at least back to 2.2 the meta tag you specify <meta name=”viewport” content=”width=device-width” /> is supported (I would assume since media queries are supported in 2.1 the meta tag is as well, even if it isn't you still cover 98.2% of users).

If you really want to go though the effort for those last few percentage points you can use some javascript to detect if media queries are supported. Personally I would checkout a library like modernizer. It will make your life much simpler if you choose to go that route.

Upvotes: 2

Related Questions