JS 手机检测隐藏 Live2D 看板娘

{"title":"JS 手机检测隐藏 Live2D 看板娘","description":"使用 JavaScript 检测用户设备是否为手机，并在手机端隐藏 id 为 live2d 的 div 元素，从而实现手机端隐藏 Live2D 看板娘的效果。","keywords":"手机检测, Live2D, 看板娘, JavaScript, 隐藏","content":"在上述代码中，我们可以使用 JavaScript 检测设备是否为手机，并根据检测结果隐藏 id 为 live2d 的 div 元素。\n\n首先，在<head>标签中添加以下 JavaScript 代码：\n\njavascript\n<script>\n // 检测设备是否为手机\n function isMobile() {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n }\n\n // 如果是手机，则隐藏 live2d div 元素\n if (isMobile()) {\n document.getElementById("live2d").style.display = "none";\n }\n</script>\n\n\n然后，在<body>标签中的<div class="waifu" id="live2d">标签之前添加以下代码：\n\nhtml\n<noscript>\n <style>\n #live2d {\n display: none;\n }\n </style>\n</noscript>\n\n\n这样，如果用户在手机上访问网页，live2d 的 div 元素将被隐藏。\n\n完整代码如下：\n\nphp\n<?php\nrequire_once 'config.php';\n\n// 获取用户信息\n$user_id = $_COOKIE['user_id'];\n$user_password = $_COOKIE['user_password'];\n\n$sql = "SELECT * FROM user WHERE user_id = '$user_id' AND user_password = '$user_password'";\n$result = mysqli_query($con, $sql);\n$user_info = mysqli_fetch_assoc($result);\n\n$img = $user_info['user_img'];\n\n?>\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<meta name=\"msvalidate.01\" content=\"B10FC67A094BCFBC683AF331C727FB57\" />\n <script src=\"/js/protect1.js\"></script>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/js/live2d/waifu.min.css?v=1.4.2\"/>\n <title>史莱姆论坛</title>\n\n<link rel=\"shortcut icon\" href=\"logo.png\" type=\"image/x-icon\">\n<link rel=\"icon\" href=\"logo.png\" type=\"image/x-icon\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"logo.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"logo.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"logo.png\">\n<meta property=\"og:image\" content=\"image.png\">\n<meta name=\"description\" content=\"史莱姆论坛是遵简联盟制作的为我的世界玩家提供的论坛，有大量优质文章、工具等，提供社交空间，为每个玩家提供良好的空间\">\n <link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">\n <script src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></script>\n <script src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n<style>\n/* 用户头像 */\n.user-avatar {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #ccc;\n margin-right: 10px;\n}\n\n.user-avatar img {\n float: left;\n width: 200%;\n height: 200%;\n}\n</style>\n</head>\n\n<body>\n\n <div class=\"container-fluid\">\n <div class=\"row\">\n \n\n <div class=\"col-xs-12 navbar navbar-default\">\n <div class=\"container\">\n\n <div class=\"navbar-header\">\n<div class=\"user-avatar navbar-brand\">\n <?php\n session_start(); // 开启会话\n if(isset($_COOKIE['user_id'])) { // 如果用户已经登录\n // 显示用户头像\n echo '<img src=\"$img\" alt=\"用户头像\">';\n } else { // 如果用户未登录\n // 显示登录链接\n echo '<a href=\"login.php\">登录</a>';\n }\n ?>\n</div>\n <button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\"#myNavbar\">\n <span class=\"icon-bar\"></span>\n <span class=\"icon-bar\"></span>\n <span class=\"icon-bar\"></span>\n </button>\n <a class=\"navbar-brand\" href=\"/\">史莱姆论坛</a>\n </div>\n <div class=\"collapse navbar-collapse\" id=\"myNavbar\">\n <ul class=\"nav navbar-nav\">\n <li class=\"active\"><a data-page=\"/fen/share/index\">分享</a></li>\n <li><a data-page=\"/fen/social/index\">社交</a></li>\n <li><a data-page=\"/fen/publish/index\">发布</a></li>\n <li><a data-page=\"/fen/tool/index\">工具</a></li>\n <li><a data-page=\"/fen/user/home\">我的</a></li>\n <li><a data-page=\"/fen/web/index\">网站</a></li>\n </ul>\n </div>\n </div>\n </div>\n\n \n <div class=\"col-xs-12\" id=\"main\">\n <h2>遵简联盟为你导航</h2>\n </div>\n </div>\n </div>\n\n <script>\n$(function() {\n // 导航栏按钮点击事件\n $('.nav li a').click(function() {\n // 更新主体部分\n var page = $(this).data('page');\n $('#main').load(page + '.php');\n\n // 更新导航栏样式\n $('.nav li').removeClass('active');\n $(this).parent().addClass('active');\n\n return false;\n });\n\n // 自动点击分享页链接\n $('.nav li a[data-page=\"/fen/share/index\"]').click();\n});\n </script>\n \n <script src=\"/js/live2d/jquery.min.js?v=3.3.1\"></script>\n \n \n <script src=\"/js/live2d/jquery-ui.min.js?v=1.12.1\"></script>\n \n <div class=\"waifu\" id=\"live2d\">\n <canvas id=\"live2d\" class=\"live2d\"></canvas>\n <div class=\"waifu-tool\">\n <span class=\"fui-eye\"></span>\n <span class=\"fui-user\"></span>\n <span class=\"fui-cross\"></span>\n </div>\n </div>\n \n <script src=\"/js/live2d/waifu-tips.min.js?v=1.4.2\"></script>\n <script src=\"/js/live2d/live2d.min.js?v=1.0.5\"></script>\n <script type=\"text/javascript\">\n /* 可直接修改部分参数 */\n live2d_settings['modelId'] = 1; // 默认模型 ID\n live2d_settings['modelTexturesId'] = 87; // 默认材质 ID\n live2d_settings['modelStorage'] = false; // 不储存模型 ID\n live2d_settings['canCloseLive2d'] = true; // 隐藏关闭看板娘按钮\n live2d_settings['canTurnToHomePage'] = false; // 隐藏返回首页按钮\n live2d_settings['waifuSize'] = '300x270'; // 看板娘大小\n live2d_settings['waifuDraggable'] = 'axis'; // 拖拽样式\n /* 在 initModel 前添加 */\n initModel("/js/live2d/waifu-tips.json?v=1.4.2")\n </script>\n\n \n <script>\n // 检测设备是否为手机\n function isMobile() {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n }\n\n // 如果是手机，则隐藏 live2d div 元素\n if (isMobile()) {\n document.getElementById("live2d").style.display = "none";\n }\n </script>\n\n</body>\n\n</html>\n