Alright so I have these media querys on two different sites hosted on the same exact server using a Galaxy S7
@media only screen and (min-width:501px) and (max-width: 999px) {
}
@media only screen and (max-width: 500px) {
}
On one site it works perfectly fine mobile view in portrait tablet view in landscape and on a computer it does its default view however on the other it is always in tablet view and I cannot for my life get it to go into mobile view of 500px or less. Now why on earth would it work perfectly fine on one site I've coded but not work on the other and always be in tablet view?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Please add the meta tag inside your head tag.
Reason:
with <meta> browser now control the page's dimensions
width=device-width : Browser sets the width of the page to follow the screen-width of the device.