prevent access to page on small screen-CodePudding

I'm making small web pages for fun and hosting them on my server just to learn stuff and sometimes i send them to some people i know to show them what i've learn but i'd like it so that my web pages aren't accesible to people on small screen. i tried doing

@media (max-width: 800px){
            body{
                height: 0px !important;
                width: 0px !important;
            }
        }

but it didn't work

CodePudding user response：

Try this:

@media (max-width: 800px) {
    html {
        visibility: hidden;
    }
}

CodePudding user response：

@media (max-width: 800px){
            body{
              display:none;
            }
        }

CodePudding user response：

A better way to do this is using window.innerWidth.

You can make an onl oad function that checks the viewport width.

window.onload = () => {
   if (window.innerWidth <= 800) {
   document.body.innerHTML = 'Page not accessible on small screens.'
   } else {
    loadDOM(); /* maybe put [display: none] on body as default and remove it here */
   }
}

This method is better for the user. Atleast they'll know that they have to access the site from a larger device