Question

我正在尝试确定我的网站是否以特定分辨率显示。要做到这一点：

body::after {
  display: none;
  content: "desktop";
}

@media screen and (max-width: 736px) {
  body::after {
    content: "mobile"
  }
}

在JavaScript方面：

(function() () {
    var devicetype = window.getComputedStyle(document.querySelector('body'), '::after').getPropertyValue('content');
    console.log(deviceType);
});

输出显示deviceType为空。

例如，当我将超时设置为2秒时，输出显示预期值！

我该怎么办？

感谢您的帮助！

Answer 1

你的javascript代码中有几个语法错误，纠正它们并且它会起作用。

＆＃13;

(function() {
  var deviceType = window.getComputedStyle(document.querySelector('body'), '::after').content;
  console.log(deviceType);
})();

＆＃13;

body::after {
  display: none;
  content: "desktop";
}

@media screen and (max-width: 736px) {
  body::after {
    content: "mobile";
  }
}

＆＃13;

当Javascript已被使用且window.innerWidth可用时，无需使用CSS。

＆＃13;

(function() {
  let deviceType = window.innerWidth > 736 ? "desktop" : "mobile";
  console.log(deviceType);
})();

＆＃13;

获取body :: after之后的内容

1 个答案: