CSS媒体查询 - 无法使其工作

Question

我有以下CSS，包括iphone用户的媒体查询，似乎不起作用：

body
{
background: url('background.png') no-repeat center center fixed;
background-size:100%;
}

#tab
{
width:30%;
height:60%;
position:fixed;
background: url('tab.png') no-repeat center center fixed;
background-size:33%;
top:20%;
left:35%;
opacity:0.7;
}

@media only screen and (max-device-width: 480px) 
{
body
{
background:#1589FF;
}

#tab
{
width:30%;
height:60%;
position:fixed;
background: url('tab.png') no-repeat center center fixed;
background-size:33%;
top:20%;
left:35%;
}
}

普通的CSS工作正常，但切换到iphone时设计不会改变。任何人都可以建议为什么上面的媒体查询似乎没有工作？我错过了什么吗？

Answer 1

代替：

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

尝试：

@media (max-width: 480px)

OR

 @media only screen and (max-width: 480px)