瀏覽器無法識別最大設備寬度

Question

我實施自適應設計，爲我的網站。對於我使用@media查詢的 顯示在不同設備上不同的看法。爲了測試目的，我使用的web開發 Firefox版工具欄和響應現場查看附加谷歌瀏覽器。

但是，如果我使用：

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

那麼它的實際設備，但是不能在瀏覽器中工作

和

如果我使用

@media only screen and (max-width: 480px) 
{ 
    //CSS 
} 

那麼只有其在瀏覽器上工作而不在設備上工作。

我哪裏去錯了？需要幫助

Answer 1

在你的情況，你可以使用這樣

@media only screen 
    and (min-device-width : 320px) 
    and (min-width : 320px) { 
    /* Styles */ 
    } 

，這是Chris Coyier

/* 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 */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

對所有設備污衊媒體查詢代碼

Answer 2

@media only screen 
    and (min-device-width : 320px) 
    and (min-width : 320px) { 
    /* Styles */ 
    } 

不工作在Firefox OS模擬器。