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
Try this:
@media (max-width: 800px) {
html {
visibility: hidden;
}
}
@media (max-width: 800px){
body{
display:none;
}
}
A better way to do this is using window.innerWidth.
You can make an onload 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