媒体查询三星Galaxy S3和S4 [英] Media Query for Samsung galaxy s3 and s4

问题描述

我试图用媒体查询来显示iPhone5，iPhone6，三星Galaxy SIII和三星Galaxy S4不同风格的文本框。对于iPhone 5和iPhone 6，我正在获得理想的结果。现在，当我从iPhone切换到三星s3时，我获得了正确的输出，但是当我尝试从S3切换到S4时，输出错误。以下是我用于媒体查询的样式。也附加截图。

I am trying to use media query to display text box with different styles for iPhone5,iPhone6,Samsung galaxy SIII and Samsung galaxy S4. For iPhone 5 and IPhone 6 I am getting desirable result. Now when I switch from iPhone to Samsung s3 I am getting correct output but when I try to switch to S4 from S3 I am getting wrong output. Here's the style that I am using for media query. Attaching the screenshots also. I am not getting the actual problem here.

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

推荐答案

对于Galaxy S4，它击中的设备宽度是超过400像素。尝试将媒体查询更改为：

For Galaxy S4, device width it hits at is a little over 400px. Try changing your media query to:

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

并查看它是否适用于您的手机。此外，这是视口必须使用：

and see if it work on your mobile phone. Also, this is the viewport must use:

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

这篇关于媒体查询三星Galaxy S3和S4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！