阻止在小屏幕上访问页面

Question

我正在制作小型网页的乐趣和托管他们在我的服务器上只是为了学习的东西，有时我把它们发送给一些人，我知道向他们展示我学到的东西，但我想这样，我的网页是无法访问的人在小屏幕上。我试着做

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

但是不工作

Answer 1

试试这个:

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

Answer 2

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

Answer 3

更好的方法是使用window.innerWidth。

你可以创建一个onload函数来检查视口宽度

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 */
}
}

这种方法更适合用户。至少他们会知道他们必须从更大的设备访问站点