CODEWITHSUNDEEP
androidcssresponsive-designmedia-queries
Chris
Chris

Reputation: 949

Media Queries for Android

I am trying to set up MQ's to make a site responsive. I have it linked and everything it working fine, with one caveat the max-width: 480px doesn't work for droid. It does recognize my mobile stylesheet when I up the max-width to around 900px.

I haven't been able to find an answer to this yet, I have played around with some viewport tags:

<meta name="viewport" content="width=device-width" />

and

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

What is the best way to target Android phones using media queries?

Upvotes: 0

Views: 2507

Answers (2)

Jonathan Kempf
Jonathan Kempf

Reputation: 697

One problem you might be running into is the fact that Android phones, even more so then Apple phones, have varying pixel widths.

For example, if you were testing on a Samsung Galaxy S3 or S4, the pixel width of those phones is well beyond 480px in landscape mode, even accounting for pixel density, so the media query would never fire. When it comes to some of the newer devices, you are better off to target user agent and then serve mobile queries based on that header response.

Also, see this answer for more details on testing for mobile devices.

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25485

You want to start by changing your meta tag to 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Good luck!

Upvotes: 0

Related Questions