本文の内容を取得する::空の後に

Question

私のウェブサイトが特定の解像度で表示されているかどうかを判断しようとしています。これを行うには：

JavaScriptの側に

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

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

：

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

を出力DEVICETYPEが空であることを表示します。

たとえば、タイムアウトを2秒に設定すると、出力に期待値が表示されます。

どうすればよいですか？

ありがとうございました！

Answer 1

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); 
 
})();