I'm currently using a mobile emulator that I've invested in, allowing me to preview my mobile site on various cell phones. However, I've encountered an issue with the android theme where my media queries seem to not be functioning properly. Interestingly, they work perfectly on iPhones, but for some reason, they're not responding on Android devices. Here's how I've set up the media queries for android:
@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 -
}
In my stylesheet, I have these sections included and when testing in dreamweaver, the different resolutions appear well on mobile sizes. However, I realized that android automatically scales the screen to make them bigger, so I added the following code at the top of my index file:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
Even after incorporating these changes, android seems to be ignoring the media queries. The page continues to render as if the resolution is incorrect, despite trying out devices with dimensions such as 480px X 800px which should technically work.
Does anyone have any suggestions or solutions for this issue? I understand that information on designing web pages for android can be limited, but I'm hopeful there are experts who might be able to assist. I spent about 8 hours straight working on this last night, determined to find a solution!
UPDATE: Upon further analysis, it appears that anything below 400px is functioning properly. The problem lies specifically in the max and min device width falling between 600 and 400 pixels...