2012-08-28 57 views
0

我已經從其他地方複製了一些媒體查詢代碼,這些代碼工作得很好,但是當將其納入到我自己的項目中時,它似乎不起作用。非常簡單的媒體查詢不起作用

我看了以前的計算器的問題,並試圖實現修復或測試,例如,

檢查媒體查詢是否通過應用不需要的背景顏色,從而未能工作。我也一定要添加視口元標籤。

這裏是我的媒體查詢

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) { 

body { margin: 5px; width: 5px; } 

.testimonial { 

      background-color: black; 
     } 


} 

活頁可以在這裏看到(點擊推薦,然後單擊圖片):http://krmmalik.com/me/

更新:剛纔與同事並且他似乎認爲媒體查詢不起作用的原因是因爲感言內容正被加載到iframe中,此時媒體檢測不會發生?

+0

你在測試什麼尺寸的屏幕?你的視口meta是什麼樣的?你在風景還是肖像? –

+0

只是好奇,是不是最大寬度通常480? – sachleen

+1

你的代碼顯示它的'.testimonials'與S,它是一個ID - 只是想知道它是否是一個錯字或錯誤 – xivo

回答

1

我試過這個,它工作完美。
如果max-width應該是479px,爲什麼要設置body寬度爲5px?

@media screen and (max-width: 479px){ 
    body { 
    margin: 5px; 
    } 
    .testimonial { 
    background-color: #000; 
    } 
} 
+0

試過這個,仍然不適合我。在移動瀏覽器上也清除了緩存,但仍然沒有運氣。你測試過什麼設備? 我設置身體寬度爲5px只是作爲一個測試,以查看它是否會以任何方式影響頁面,但在我的設備上我沒有看到任何更改。 –

+0

我也試過了 - @media只有屏幕和(max-device-width:480px), 只有屏幕和(-webkit-min-device-pixel-ratio:2) –