网上没有现成的模板，只有各种方法，原本想学段时间前端后再来做，抱着试一试的态度，一不小心做成了。^_^

代码：


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-cn">

<title>提示</title>
</head>

<body onload="isWeiXin();is_QQInnerBro();">

<script>
// 判断是不是微信浏览器
    function isWeiXin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            qqout();
        } else {
            return false;
        }
    }
//判断是不是QQ浏览器    
    function is_QQInnerBro(){
        var ua = window.navigator.userAgent.toLowerCase();        
        if (ua.indexOf(' qq')>-1 && ua.indexOf('mqqbrowser') -1 && ua.indexOf(" qq")) {
                qqout();
            } else {
                return false;
            }
        };
    function qqout(){
        document.writeln("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">");
        document.writeln("<p align=\"center\">　</p>");
        document.writeln("<p align=\"center\">　</p>");
        document.writeln("<p align=\"center\">请点击右上角，选择使用系统自带的浏览器打开！</p>");
        }
</script>
<meta http-equiv="refresh" content="0;url=http://soarli.top"> 
</body>

</html>

在网上看到了通过PHP实现的教程，先把代码贴过来，回头试试：

<?php

/**
 * 检验私密页面的密码
 *
 * 使用方法,在有需要的加密的页面最开始补充下面这行代码
 *
 * <?php
 *  include('password.php');
 * ?>
 *
 * 然后把本页代码命名为password.php即可.
 *  
 *  PS:需要退出登录就直接在页面的后面加入请求password.php?action=logout
 */
$page_pwd = md5('小小酥'); //你要设置的密码
$page_cookname = 'my-page-password'; //你要设置的cookie名
$page_now = "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'];
$action = @$_GET['action'];
$page_postpwd = @$_POST['page_pwd'];
$page_cookiepwd = @$_COOKIE["$page_cookname"];
$page_cookietime = time() + 60 * 60 * 24 * 7;

//输出网页的头部
$head =  '
    <head>
    <meta charset="utf-8">
    <title>product</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">body,button,input,select,textarea,h1,h2,h3,h4,h5,h6 {
        font-family: Microsoft YaHei, "宋体", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    }
    </style>
';

//退出登录
if ($action == "logout") {
    setcookie($page_cookname, "", time() - 1);
    echo '
    <meta http-equiv="refresh" content="2";URL='.$page_now.'>

    </head>
    <body>
    <div class="container-fluid">

    <p>退出成功,2秒后自动跳转</p>
    <a role="button" class="btn btn-success" href='.$page_now.'>点此马上跳转</a>

    </div>
    </body>
    </html>
    ';
    exit;
}

//有输入密码
if ($page_postpwd != "") {
    //密码错误
    if (md5("$page_postpwd") != $page_pwd) {
        echo $head;
        echo '
            <meta http-equiv="refresh" content="2";URL='.$page_now.'>

            </head>
            <body>
            <div class="container-fluid">

            <p>密码错误,2秒后自动跳转</p>
            <a role="button" class="btn btn-success" href='.$page_now.'>点此马上跳转</a>

            </div>
            </body>
            </html>
            ';
        exit;
    }
    //密码正确
    else {
        //设置Cookies
        setcookie($page_cookname, md5("$page_postpwd"), $page_cookietime);
        echo $head;
        echo '
            <meta http-equiv="refresh" content="2";URL='.$page_now.'>
            </head>
            <body>
            <div class="container-fluid">

            <p>密码正确,2秒后自动跳转</p>
            <a role="button" class="btn btn-success" href='.$page_now.'>点此马上跳转</a>

            </div>
            </body>
            </html>
            ';
        exit;
    }
}
//没输入密码
if ($page_cookiepwd != $page_pwd) {
    echo $head;
    echo '
        </head>
        <body>
        <div class="row text-center vertical-middle-sm">
        <div class="col-sm-12">
        <div class="container-fluid">
        <br>
        <p>这是一个私人页面,请输入您的密码</p>
        <br>
        <form method="POST">
            <div class="form-group">
        <input type="text" class="form-control" name="page_pwd" placeholder="请输入您的密码">
        <br>
        <button type="submit" class="btn btn-default">确认</button>

        </div>
        </div>
            </div>
        </form>
        </div>
        </body>
        </html>
        ';
    exit;
}
?>

3.16补充：新增了电脑手机的区分识别方法


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-cn">

<title>提示</title>
</head>

<body>

<script>
if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
        document.writeln("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">");
        document.writeln("<p align=\"center\">　</p>");
        document.writeln("<p align=\"center\">　</p>");
        document.writeln("<p align=\"center\">本页面禁止在手机/iPad访问，请使用PC！</p>");
} else {
    document.writeln("<p align=\"center\">电脑访问！</p>");
    /*window.location.href = "http://baidu.com/";*/
}
</script>

</body>

</html>

参考资料：

https://www.h5w3.com/?p=129

https://www.hotbak.net/key/%E5%A6%82%E4%BD%95%E5%8C%BA%E5%88%86%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8QQ%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8CQQ%E5%86%85%E7%BD%AE%E6%B5%8F%E8%A7%88%E5%99%A8PHP%E6%80%A5%E5%8D%9A%E5%AE%A2%E5%9B%AD.html

https://blog.csdn.net/wzp6010625/article/details/53171604

https://www.jianshu.com/p/7d8c9f4455a0

https://blog.csdn.net/linghunyoushou/article/details/92760638