嘿，这个问题问得挺实际的——咱们来拆解一下：

你给出的CSS代码可以在视觉层面隐藏小屏幕设备的内容，但做不到真正“阻止设备打开网站”，具体细节如下：

1. 视觉隐藏的可行性 #

这段媒体查询（@media）的逻辑是完全成立的：当设备屏幕宽度≤600px时，会对body应用指定样式。如果把样式改成display: none;，确实能让小屏幕用户看不到页面内容，比如：

@media only screen and (max-width: 600px) {
  body {
    display: none; /* 完全隐藏页面所有内容 */
  }
}

类似的效果也可以用visibility: hidden;（保留内容占位空间）或者position: absolute; left: -9999px;（把内容移出可视区域）实现。

2. 关键局限性 #

这种方法只是“视觉隐藏”，存在明显的漏洞：

• 用户可以通过查看页面源代码直接获取内容，搜索引擎爬虫也能正常抓取页面HTML结构
• 浏览器开发者工具可以轻松禁用或修改这段CSS，用户切换到桌面模式也能绕过限制
• 无法阻止设备加载网站资源，用户还是会消耗流量加载页面的图片、脚本等内容

3. 真正限制访问的思路（不推荐） #

如果一定要实现“阻止访问”，单纯CSS做不到，需要结合后端逻辑：

• 检测请求的用户代理（User-Agent）或视口尺寸
• 根据检测结果返回空白页面、提示信息，或者重定向到其他页面
  但这种方法也不完美——用户代理可以伪造，视口尺寸也能通过工具修改，而且会严重影响用户体验（比如误判设备类型）。

4. 更合理的建议 #

除非有特殊业务需求，否则不建议隐藏小屏幕内容。现在移动设备用户占比极高，更好的方案是做响应式设计，优化小屏幕的布局和内容展示，让不同尺寸的设备都能正常访问网站。

内容的提问来源于stack exchange，提问作者A. Shawkat