如何重定向或禁止移动端访问纯HTML站点？

以下是无需（或尽量避免）JavaScript的解决方案，适配你的纯HTML电脑端站点需求：

方案1：CSS媒体查询切换显示内容（纯HTML+CSS，无脚本） #

这是最贴合“仅HTML”需求的方案，通过媒体检测屏幕尺寸，对移动端用户隐藏主内容，展示专属提示或引导链接。

实现代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电脑端专属项目</title>
    <style>
        /* 默认状态：显示电脑端内容，隐藏移动端提示 */
        .desktop-only {
            display: block;
            padding: 2rem;
        }
        .mobile-redirect {
            display: none;
        }

        /* 针对移动端屏幕（以768px为分界，可根据需求调整） */
        @media only screen and (max-width: 768px) {
            .desktop-only {
                display: none;
            }
            .mobile-redirect {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;
                padding: 2rem;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="desktop-only">
        <!-- 你的电脑端项目内容 -->
        <h1>专属项目展示（仅电脑端可见）</h1>
        <p>这里是仅适配电脑端的项目内容...</p>
    </div>

    <div class="mobile-redirect">
        <h2>此站点仅支持电脑端访问</h2>
        <p>请使用电脑设备打开页面，或访问<a href="/mobile-exclusive.html">移动端专属页面</a></p>
    </div>
</body>
</html>

优点：完全不依赖脚本，纯前端实现，无需服务器配置；
局限性：未实现真正的URL重定向，只是内容切换，但足以明确告知用户访问限制。

方案2：服务器端User-Agent检测重定向（需服务器支持） #

如果你的站点有服务器配置权限（如Apache、Nginx），可以通过服务器规则直接识别移动端设备并完成重定向，完全无需前端代码。

Apache（.htaccess配置） #

在站点根目录创建.htaccess文件，添加以下规则：

RewriteEngine On
# 匹配常见移动端设备的User-Agent
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|iphone|ipad|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]
# 重定向到移动端专属页面，302为临时重定向，可改为301永久重定向
RewriteRule ^(.*)$ /mobile-page.html [R=302,L]

Nginx（配置文件） #

在站点server块中添加：

if ($http_user_agent ~* (android|blackberry|iphone|ipad|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile)) {
    return 302 /mobile-page.html;
}

优点：重定向更彻底，移动端用户会直接跳转到目标页面；
局限性：需要服务器配置权限，不属于纯HTML范畴。

注意事项 #

• 屏幕尺寸分界值（如768px）可根据你的项目适配需求调整；
• 服务器端重定向的User-Agent规则可根据需要补充更多设备标识；
• 若必须使用脚本方案（万不得已），可通过JS检测屏幕尺寸或User-Agent实现重定向，但优先推荐上述无脚本方案。

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