媒體查詢不能在iPhone上工作，但罰款瀏覽器調整

嗨我目前使用Boilerplate主題稱爲Bones在WordPress，但我有問題，使我的Iphone響應菜單工作。當我手動調整菜單似乎工作媒體查詢不能在iPhone上工作，但罰款瀏覽器調整

使用媒體查詢IM是

@media只有屏幕和（最小寬度：960像素）{

現場即時試圖去工作是在這裏：link

任何幫助，因爲我已經去了主題作家，他並沒有在天

2012-11-05 Matt James

您是否在html的頭部添加了media =「screen」？（在

You need to mention Media like this for iphone and smartphones 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
}

來源

2012-11-06 12:41:54 Gopikrishna

您不需要**就可以使用媒體查詢的最小值和最大值。它可以幫助避免某些衝突，但是也可以以智能的方式堆疊它們。 –

我只是碰到哪裏，當我裝我的樣式表這個問題來到你的文檔的頭把這個：

<link src="mobile.css" media="only screen and (min-width: 400px)" />

，然後內mobile.css，我有一對夫婦這樣的風格：

@media screen and (min-width: 400px) { 
    body { 
     background: red; 
    } 
} 

h1 { 
    color: blue; 
}

和幾個設備（iPhone，iPad - 當然有不同的斷點，和Ga laxy Nexus）沒有看到background:red;規則（「嵌套」媒體查詢），只有那些「內嵌」媒體查詢（h1）以外的。不過，Chrome和其他瀏覽器都很好。

來源

2013-06-14 13:43:39 allicarn

到那時，他已經在爲'media =「screen」設置的樣式表中獲得了打印樣式，所以它們將不起作用。 –

我最近再次測試了這個，沒有這個麻煩，在iPhone6/iOS8/Chrome，iPhone6/iOS8/Safari，三星S5/4.4.2/Chrome，三星S5/4.4.2 /股票，三星S5/4.4.2/Firefox，iPad1/iOS5/Safari，Nexus7/4.4.4/Chrome，HTC One/4.4.2/Chrome，S2 Tablet/4.0/Chrome，S2 Tablet/4.0/Stock，S2 Tablet/4.0/Firefox – allicarn

這種跳出我怪異：

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

我認爲，應該是

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

或...

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

您也可能要考慮移動將XHTML轉換爲適合您的doctype的HTML5。

來源

2013-06-14 18:57:25

相關問題