CSS3 Media Queries are not working

问题:

I've recently been developing a mobile version for a website, and quite simply want to be able to change the CSS file if the browser is detected to be on a mobile device. You can view my previous attempts here, but I have now decided that the most feasible way of getting this done is to focus on Media Queries.

The problem I have here is that the media queries just don't work at all. It always loads the default stylesheet. Here is the code I have:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Have I missed something with this code? I've tried using the many tutorials offered for this but none seem to help me. I've really hit a dead end here so any help would be massively appreciated.

回答1:

The default stylesheet doesn't have any attributes that would stop it from being loaded.

You could give it media="screen and (min-width: 481px)", but that would lead to the danger, that older browsers won't load it either.

Usually it's best, to have the default stylesheet load and just make sure, that the mobile stylesheet overrides anything you don't need from the default stylesheet.

回答2:

Completing the conditional with min-device-width worked for me on iOS. Note the word device. It did work fine on android even without the word device, however.

回答3:

i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css

here is an example :

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css Link line as simple as above line.

回答4:

If you have initial-scale=1.0 and maximum-scale=1.0, then it's a bit redundant to have user-scalable=0 as well. Having maximum-scale set to equal initial-scale means the user can't zoom in at all because they start at the maximum zoom.