@media only screen and (max-width: 479px) 不适用于移动设备

Question

My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.

@media only screen and (max-width: 1024px) {
 body{
   background-color:#ff0000;
  }
}

@media only screen and (max-width: 767px)
{
 body{
   background-color:#000;
  }
}

@media only screen and (max-width: 479px)
{
 body{
   background-color:#111;
  }
}

Answer 1

In the head of your document, make sure you have

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

If you omit this, then many devices will scale the page to fit the viewport.

Good luck

Answer 2

Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.

Here's an example of a viewport meta tag - this is the one I use on my own responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

Maybe you can specifiy by using

@media only screen and (min-width:768px) and (max-width: 1024px) {}

because if a screen is 200px in width it would comply to all the other rules it's not exceeding their width

Have a great day

Answer 4

Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.

Also some mobile devices will respond to the @media handheld selector.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/

@media handheld and (max-width: 960px)
/*handheld*/

Answer 5

签入标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 6

我遇到了同样的问题，但是将 @media (max-width: 400px) 更改为 @media (max-device-width: 400px) 对我有用，希望对您有所帮助

Answer 7

Why not use Twitter Bootstrap? http://twitter.github.com/bootstrap/