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