Angularjs 三星galaxy s3和s4的媒体查询

我正在尝试使用media query显示iPhone5、iPhone6、三星galaxy SIII和三星galaxy S4的不同样式的文本框。对于iphone5和iphone6，我得到了理想的结果。现在，当我从iPhone切换到三星s3时，我得到了正确的输出，但当我尝试从s3切换到S4时，我得到了错误的输出。以下是我用于媒体查询的样式。附加屏幕截图也。我这里没有真正的问题

    <style>
@media only screen and (device-width:375px){
     .homeDOB{
         width:60% !important;
        height:80px !important;
        background-color: yellow;
} }

@media only screen and (device-width:320px) {
     .homeDOB{
         width:60% !important;
        height:80px !important;
        background-color: black;
} }



@media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:2){
.homeDOB{
width:60% !important;
        height:80px !important;
        background-color: gray;
}
}

@media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:3){
.homeDOB{
width:60% !important;
        height:80px !important;
        background-color: red;
}
}



</style>

@仅介质屏幕和（设备宽度：375px）{
霍梅多布先生{
宽度：60%！重要；
高度：80px！重要；
背景颜色：黄色；
} }
@仅介质屏幕和（设备宽度：320px）{
霍梅多布先生{
宽度：60%！重要；
高度：80px！重要；
背景色：黑色；
} }
@仅介质屏幕和（设备宽度：360px）和（设备高度：640px）和（-webkit最小设备像素比：2）{
霍梅多布先生{
宽度：60%！重要；
高度：80px！重要；
背景颜色：灰色；
}
}
@仅介质屏幕和（设备宽度：360px）和（设备高度：640px）和（-webkit最小设备像素比：3）{
霍梅多布先生{
宽度：60%！重要；
高度：80px！重要；
背景色：红色；
}
}

对于Galaxy S4，它的设备宽度略高于400px。尝试将媒体查询更改为：

@media screen and (max-width: 480px) {
    .homeDOB {
        width:60% !important;
        height:80px !important;
        background-color: black;
    }
}

看看它是否能在你的手机上工作。此外，这是视口必须使用的：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

---

三星Galerxy s3和s4的设备宽度为640px。 试试这个

---

在这里你可以找到设备宽度/高度列表

你能显示正确和错误的结果吗？我想附上屏幕截图，但我没有太多的积分来添加图像。实际上，正确的输出应该有60%的屏幕显示宽度，但当我从s3切换到s4或从s4切换到s3时，高度和宽度都会增加，这是不可取的。

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