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 v

Solution 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.

Solution 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.

Solution 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.

Solution 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.