我试图确定我的网站是否以特定分辨率显示。去做吧 :

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秒时,输出将显示预期值!

我能做什么 ?

谢谢你的帮助 !

最佳答案

您的javascript代码中有几个语法错误,请更正它们,它将起作用。



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

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

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







当已经使用Javascript并且window.innerWidth可用时,就不需要使用CSS。



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

09-25 19:25