JavaScript max-width removeAttribute

Question

我的代码有问题。

此代码检查移动设备的分辨率并打开具有相同分辨率的网页。但是当我从显示宽度小于480像素的移动设备打开页面并滚动时，页面查看不正确。我想删除显示宽度小于480px的设备的代码。

你能帮助我吗？

的JavaScript

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
            shrinkOn = 200,
            header = document.querySelector("nav");
        if (distanceY > shrinkOn) {
            header.setAttribute("id","smaller");
        } else {
            header.removeAttribute("id","smaller");
        }
    });
}

我不想要：添加480px宽度id smaller。

Answer 1

如果我理解正确，你需要这行代码：header.setAttribute（“id”，“less”）; 仅在宽度大于480px时才执行。如果是这种情况，请尝试以下操作：

var width = document.body.clientWidth;

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
            shrinkOn = 200,
            header = document.querySelector("nav");
        if (distanceY > shrinkOn) {
            if (width > 480) {
            header.setAttribute("id","smaller");
            }           
        } else {
            header.removeAttribute("id","smaller");
        }
    });
}