如何解决Javascript：检查屏幕宽度并删除HTML元素
我的页面上有2个滑块； 1个用于移动设备和平板电脑（小于500像素的屏幕宽度），另一种用于台式机（大于500像素的屏幕宽度）。我正在使用CSS（显示：阻止，显示：无）属性来相应地显示它们，但是，浏览器正在下载两个滑块的图像。我需要一个可以的 JavaScript代码；
- 确定屏幕宽度
- 如果屏幕宽度小于或等于500px，请按CSS类删除桌面滑块div，
- 如果屏幕宽度大于500px，请按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>
解决方法
查看此代码段：
const user = await auth.getUser();
const mails = request.all().mails;
const receivers_mails = JSON.parse(mails);
const mail_array_check = await receivers_mails.filter(async m => {
const rules1 = {m: 'email'};
const validation1 = await validateAll(m,rules1)
if (validation1.fails()) {
return response.status(400).send({status: false,message: validation1.messages()})
}
});
CSS：-
首先，我们使用<!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>隐藏了类.show-mobile。
接下来，我们创建了一个新的CSS规则，专门针对使用display: none;的最大宽度为500px或更小的屏幕。
最后，在规则内，我们隐藏了类@media only screen and (max-width: 500px)并显示了类.show-desktop。
JavaScript：-
在头部内部，我们将视口的高度和宽度分别保存为常数.show-mobile和vw。
在主体部分，我们根据视口的宽度在文档中添加vh类。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
