浏览器无法识别最大设备宽度

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模拟器。