Javascript：检查屏幕宽度并删除 HTML 元素答案

【问题标题】：Javascript: Check screen width and remove HTML elementJavascript：检查屏幕宽度并删除 HTML 元素
【发布时间】：2020-09-03 08:03:27
【问题描述】：

我有一个有 2 个滑块的页面； 1 个用于移动设备和平板电脑（小于 500 像素的屏幕宽度）和一个用于台式机（大于 500 像素的屏幕宽度）。我正在使用 CSS (display: block, display:none) 属性来相应地显示它们，但是，浏览器正在下载两个滑块的图像。我需要一个 Javascript 代码 可以；

确定屏幕宽度
如果屏幕宽度小于或等于 500px，则通过 CSS 类删除桌面滑块 div，
如果屏幕宽度大于 500 像素，则通过 CSS 类删除移动滑块 div。

我无法使用 JQuery，因为我们在库和网站设计方式方面存在一些问题（长话短说）。

这里是 HTML 元素；

<div class="show-desktop">
        [rev_slider alias="slider"][/rev_slider]
    </div>

    <div class="show-mobile">
        [rev_slider alias="slider-mobile"][/rev_slider]
    </div>

【问题讨论】：

您需要两个滑块有什么特别的原因吗？
Media Query 做你需要的，无 js
嘿，你需要自己尝试一些代码，然后带着疑问或错误回来。当你编码时，即使是一点点努力也会有很长的路要走。请尝试一下。
嗨，我做到了，但发布我失败的尝试毫无意义。我宁愿以简洁的方式提出问题
您需要使用srcset 之类的名称。它可以为不同的屏幕分辨率指定不同的图像。查看文档以获取更多详细信息developer.mozilla.org/en-US/docs/Learn/HTML/… 而且这种方法不需要 JavaScript

标签： javascript html revolution-slider

【解决方案1】：

看看这个sn-p：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        .show-mobile{
            display: none;
        }

        @media only screen and (max-width: 500px) {
            .show-desktop {
                display: none;
            }
            .show-mobile{
                display: block;
            }
        }
    </style>
    <script type="text/javascript">
        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
    </script>
</head>
<body>
    <script type="text/javascript">
        if(vw > 500){
            document.writeln('<div class="show-desktop">');
            document.writeln('\t[rev_slider alias="slider"][/rev_slider]');
        } else {
            document.writeln('<div class="show-mobile">');
            document.writeln('\t[rev_slider alias="slider-mobile"][/rev_slider]');
        }
    </script>
    </div>
</body>
</html>

CSS:-

首先我们使用display: none; 隐藏类.show-mobile。

接下来我们创建了新的 CSS 规则，专门用于最大宽度为 500 像素或更小的屏幕，使用 @media only screen and (max-width: 500px)。

最后，在规则内部，我们隐藏了 .show-desktop 类并显示了 .show-mobile 类。

JavaScript:-

在 head 部分中，我们将视口高度和宽度分别保存在常量 vw 和 vh 中。

在正文部分，我们根据视口的宽度在文档中添加具有适当类的<div>。

【讨论】：

谢谢。我目前正在使用该方法，但是，浏览器仍在下载所有图像。我需要删除 html 元素，以便浏览器不会下载两个滑块的图像
你能多展示一些你的代码吗，放图片的地方
我确信会有多个图像需要管理。需要查看您的代码以管理所有这些。
所以，这里有一个 url - premierbet.com.gh。如果您使用检查工具，您将能够在名为“slotholder”的 div 中找到图像。这是一个自动化类，因为“Revolution Slider”是第三方插件。如果您检查我上面的初始问题，短代码会将第三方滑块代码拉入页面。我创建了 2 个滑块，以便能够将桌面与移动图像分开。 Revolution 滑块确实提供了与移动相关的选项，但所有图像仍由浏览器下载，使这些选项无用。
您必须使用脚本来检测视口大小并相应地编写 HTML。我直接写在文件里。我们还可以采用更模块化的方法，为桌面和移动设备加载单独的文件，并根据视口大小从中加载内容。无论如何，如果我们想根据视口大小加载图像，使用脚本是不可避免的。