Samsung Galaxy A20 Viewport size

Question

I have to write a custom media query in portrait and landscape for Samsung A20 and I can't find the viewport. Does anyone know this? (not for A20s or A20e).

Thanks

Answer 1

You can change the min and max width according to your requirement here

@media only screen and (min-width: 200px) and (max-width: 414px) and (orientation : portrait) {
                    //Put your CSS here for 200px to 414px width devices (cover all mobile portrait width //        
              }
        
        
 @media only screen and (min-width: 500px) and (max-width: 767px) and (orientation:landscape) {
                    //Put your CSS here for 500px to 7674px width devices (cover all mobile landscape width //        
              }

Answer 2

You can query for the current device viewport size:

window.innerWidth
window.innerHeight

Answer 3

Well, in short, if you will target every single mobile device out there, you would be nearly mad. So, my suggestion as a Front-End Developer is that you should always go for main break points and never forget to start from "max-width" in media query.... Max width will help you to target from 0 to 396px or 396px to 768px. But min-width will allow from 396px to 0. So max-width is best option and Go for main break points for mobile devices

Answer 4

Media queries for A20 portrait: @media only screen and (min-device-width: 320px) and (max-device-height: 694px)

(I'm not absolutely sure about WebKit but you can try 2.2)

and (-webkit-device-pixel-ratio: 2.2)