I have been working on implementing media queries to show text boxes with different styles for iPhone 5, iPhone 6, Samsung Galaxy SIII, and Samsung Galaxy S4. Initially, everything was working fine for iPhone 5 and iPhone 6, but when I switched from an iPhone to a Samsung S3, the output was correct. However, when attempting to switch from the S3 to the S4, the output was incorrect. Below is the CSS code I used for the media query along with some screenshots. I'm having trouble identifying the root cause of this issue.
<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>