[angularjs]媒体查询的三星 galaxy s3 和 s4

发布时间: 2017/5/1 14:56:47
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图使用媒体查询来显示不同样式的 iPhone5、 iPhone6、 三星 galaxy SIII 和三星银河 S4 的文本框。IPhone 5 和 IPhone 6 我得到理想的结果。现在从 iPhone 改用三星 s3 的时候我得到正确的输出,但尝试切换到 S4 从 S3 时我得到错误的输出。这里是我使用媒体查询的样式。此外附上截图。我不很实际的问题。

    <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>

解决方法 1:

对于银河 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" />
赞助商