如何禁止小屏幕设备访问网页？CSS媒体查询设置宽高为0无效

• 最直接的问题：只把body的宽高设为0，但没有加overflow: hidden属性。父容器宽高为0不会自动把子元素藏起来，子元素默认可以溢出父容器范围正常显示，相当于你把盒子缩成了点但没封盖，里面的内容全露在外面，自然达不到隐藏效果。
• 规则优先级不够：多数浏览器默认会给html、body设置min-width、min-height属性，你写的宽高0规则如果没有覆盖这些默认属性，根本不会生效。
• 方案本身逻辑有漏洞：就算加了溢出隐藏，只要页面里有脱离文档流的元素（比如加了position: fixed/absolute的元素），照样会突破父容器的宽高限制显示出来，而且用户只要打开浏览器开发者工具删掉这几行CSS就能正常访问，防护性几乎为0。

根据你的场景（个人学习页面、仅分享给熟人），可以按需要选以下方案：

1. 纯CSS拦截（实现最简单，足够防普通用户） #

不要改body宽高，直接在小屏状态下加一层最高层级的全屏遮罩盖住所有内容，同时锁死页面滚动，代码如下：

@media (max-width: 800px) {
  html, body {
    overflow: hidden !important;
    width: 100%;
    height: 100%;
  }
  body::after {
    content: "当前屏幕宽度过小，请使用电脑等大屏设备访问本页面";
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-size: 1rem;
  }
}

提示：这个方案防不住会用浏览器开发者工具的用户，对方只要删掉这段CSS就能正常看内容，适合完全不懂技术的熟人访问场景。

2. JS+视口判断拦截（防护性稍好） #

页面加载和窗口尺寸变化时实时检测视口宽度，小于阈值就直接替换页面内容为提示，代码如下：

const blockSmallScreen = () => {
  const width = window.innerWidth || document.documentElement.clientWidth;
  if (width < 800) {
    document.documentElement.style.overflow = 'hidden';
    document.body.innerHTML = '<div style="height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;">请使用大屏设备访问本页面</div>';
  }
}
window.addEventListener('load', blockSmallScreen);
window.addEventListener('resize', blockSmallScreen);

提示：这个方案同样会被禁用JS、或者会改开发者工具的用户绕过，但是对于个人非敏感的学习展示页面来说，实用性足够。

3. 服务端拦截（最稳妥，普通用户无法绕过） #

因为你用自有服务器托管，可以直接在web服务层（比如Nginx、Apache，或者你的后端服务里）判断请求的User-Agent头，识别到手机、平板等移动设备时，直接返回提示页面，不传输实际的网页源码。
这个方案的优势是小屏设备根本加载不到实际的页面内容，普通用户完全没有绕过的可能，唯一的缺点是如果用户刻意修改浏览器UA模拟桌面端，还是能访问，但对于分享给熟人的场景来说完全够用。

内容的提问来源于stack exchange，提问作者hey