issue with media queries css

Question

I have a problem with media queries in my css, i want to apply a style when the screen size is 900px, but that style works until the screen size is 810px.

this is my viewport:

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

and this is my css:

@media all and (max-width: 900px){
    .form{display:none;}
}

my html is only this

<div class="form"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>

I couldn't find a solution about this problem. Thanks for your help :).

Answer 1

我遇到了这个问题，只是我不小心将浏览器屏幕缩小了。

Answer 2

Try any of the below and let me know if it's work for you or not...

@media screen and (max-width: 900px){
        .form{display:none;}
    }
    *************
    @media only screen and (max-width: 900px){
        .form{display:none;}
    }

Also change the viewport line to this:

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes">

OR

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