CODEWITHSUNDEEP
androidhtmlcssmobilejquery-mobile
king
king

Reputation: 1344

Why don't these media queries work on android for a webpage?

I'm using a mobile emulator that I'm paying for where I can view my mobile site on many different cell phones and the theme across all the android phones are that for some reason, my media queries are not working. They are working on the iPhone, but not sure what is going on with adnroid. This is what i'm using for the android media queries:

@media only screen and (max-device-width: 400px) {
- styles here -
}

@media only screen and (max-device-width: 600px)and (min-device-width:401px) {
- styles here -
}

I have those sections in my stylesheet, which when I am using dreamweaver, all the different resolutions look good in the mobile sizes. Then I was thinking.. oh wait, android is automatically scaling the screen to make them bigger, so I added this to the top of my index:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

I added those, but STILL android isn't paying attention to the media queries for some reason. It's rendering the page as if the resolution doesn't match, even though the devices I have tried include a 480px X 800px so it should work there....

Anyone have any ideas? I know droid web page design info is kinda scarce.. but I'm hping there might be some gurus out there.... I stayed up all night last night working on this about 8 hrs straight lol.

EDIT: On further examination, it looks like anything less than 400px is working, however, it's the max and min device width being between 600 and 400 which is causing problems......

Upvotes: 1

Views: 1247

Answers (2)

king
king

Reputation: 1344

i removed the max-device-width:600px and it is now rendering the correct thing. not sure what had happened, but thats the answer, dk what i did.

Upvotes: 1

aroundtheworld
aroundtheworld

Reputation: 782

Reorder your min value before the max value:

@media only screen and (min-device-width: 401px) and (max-device-width:600px) {
- styles here -
}

Upvotes: 0

Related Questions