给网页添加遮罩层，当电脑访问时显示遮罩层，手机访问时显示正常内容，方法很简单，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遮罩层示例</title>
<style>
/* 遮罩层样式 */
.zhezhao {
display: none; /* 默认不显示 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
color: white;
font-size: 24px;
text-align: center;
line-height: 100vh; /* 垂直居中 */
z-index: 1000; /* 确保遮罩层在最上层 */
}
</style>
</head>
<body>
<!-- 遮罩层 -->
<div class="zhezhao">这是遮罩，可以显示。</div>
<!-- 页面内容 -->
<h1>Welcome to the Page</h1>
<p>This is a sample page.</p>
<script type="text/javascript">
// 检测是否为移动端
function isMobile() {
const userAgent = navigator.userAgent.toLowerCase();
return /android|iphone|ipad|mobile/i.test(userAgent);
}
// 根据设备类型显示或隐藏遮罩层
function showOrHideMask() {
const mask = document.querySelector('.zhezhao');
if (isMobile()) {
// 如果是移动端，隐藏遮罩层
mask.style.display = 'none';
} else {
// 如果是电脑端，显示遮罩层
mask.style.display = 'block';
}
}
// 页面加载时执行判断
document.addEventListener('DOMContentLoaded', showOrHideMask);
</script>
</body>
</html>
淘宝店
