Search code examples
cssmedia-queries

CSS Media Queries working in Dolphin browser but not Chrome or Safari?

I've done a lot of reading off of stackoverflow and various sites off of google, but I haven't been able to find a solution for this yet. :(

I have in my header:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile-style.css" />

(I originally only had the first two in my meta viewport content (width=device-width, initial-scale=1.0), but added the second two after reading through some articles.)

In my mobile-style.css file, I have:

@media only screen and (max-device-width: 568px;) {
  ...
}

I have experimented with the max-device-width here as well, it has been 320, 480, 600, and 680... none of them work.

I can view this mobile stylesheet on my xperia Z using the dolphin browser (but not the Chrome browser), and on my friend's iPhone 3GS. Elsewhere it doesn't show up. The goal is just a simple mobile layout for the current site for any smaller-sized screen device.

Let me know if I should be providing more information.

Thanks! :)

EDIT

Here is the gist for my mobile-style.css file: https://gist.github.com/melissanoelle/7043032

Sorry for the delay, I've been away from a computer while traveling for my grandfather's funeral. :(

Solution

  • Turns out I needed to change my css query to this:

    @media screen and (max-width: 568px), screen and (max-device-width: 568px) {
...
}

    I got rid of the semi-colons and created a query for both max-width and max-device-width.