隐藏body内容手机和电脑分别用不同的图片覆盖网页js代码

隐藏body内容手机和电脑分别用不同的图片覆盖网页js代码

审查元素能破，用途不广，好像弹窗什么的也用不上这个呢，仅供学习交流，有这种路径，因为只隐藏body的话也不会显示图片了，所以用优先级创建遮罩来遮挡吧

<script>
// 立即执行的JavaScript代码
(function() {
    // 创建遮罩层 div
    var overlayDiv = document.createElement('div');
    document.documentElement.appendChild(overlayDiv);

    // 设置遮罩层样式，使其覆盖整个屏幕
    overlayDiv.style.position = 'fixed';
    overlayDiv.style.top = '0';
    overlayDiv.style.left = '0';
    overlayDiv.style.width = '100vw';
    overlayDiv.style.height = '100vh';
    overlayDiv.style.zIndex = '99998'; // 确保遮罩层在最顶层
    overlayDiv.style.backgroundColor = '#fff'; // 白色背景，或其他你喜欢的颜色

    // 创建 img 元素来显示图片
    var overlayImage = new Image();

    overlayImage.style.position = 'fixed';
    overlayImage.style.top = '0';
    overlayImage.style.left = '0';
    overlayImage.style.width = '100vw';
    overlayImage.style.height = '100vh';
    overlayImage.style.zIndex = '99999'; // 确保图片在遮罩层之上

     // 根据视口宽度设置不同的图片路径
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (width <= 768) { // 假设768px为手机和电脑的分界点
        overlayImage.src = '1.jpg'; // 手机图片路径
    } else {
        overlayImage.src = '2.jpg'; // 电脑图片路径
    }

    // 当图片加载完成后再显示
    overlayImage.onload = function() {
        overlayDiv.appendChild(overlayImage);
    };
})();
</script>