@media only screen and (max-width: 479px) 不適用於移動設備

Question

我的移動版本 (max-width : 479px) 沒有顯示 #111 的背景顏色。 相反，#000 顯示為背景顏色。 請幫我。

@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

在你的文件的頭部，確保你有

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

如果您省略此項，則許多設備將縮放頁面以適應視口。

祝你好運

Answer 2

您是否指定了視口元標記？ 我也建議將 479 更改為 480。

這是一個視口元標記的示例 - 這是我在自己的響應式網站上使用的標記。

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

Answer 3

也許你可以通過使用來指定

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

因為如果屏幕的寬度為 200 像素，它將符合所有其他規則，它不會超過其寬度

祝你有美好的一天

Answer 4

嘗試使用設備寬度而不僅僅是屏幕尺寸。 許多移動/平板設備將在概覽中打開頁面，因此屏幕尺寸將被忽略。

還有一些移動設備會響應@media handheld選擇器。

@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

為什么不使用 Twitter Bootstrap？ http://twitter.github.com/bootstrap/