JSFiddle - React, Tailwind, and code Playground

HTML

<div id="raw"></div>
<div id="output"></div>
<hr />

CSS

#output { color: green; }
body::after { content: '900px'; color: red; }

@media only screen and (max-width  : 480px),
       only screen and (max-height : 480px) {
    body::after { content: '480'; }       
}

@media only screen and (max-width  : 320px),
       only screen and (max-height : 320px) {
    body::after { content: '320px'; }           
}

JavaScript

$(document).ready(function() {
 $(window).on('resize orientationchange', function() {
     width = window.getComputedStyle(document.body,':after').getPropertyValue('content');
     $('#raw').text(width);
     $('#output').text(width.replace(/"/g, ''));
     $('meta[name=viewport]').attr('content','width=' + width + 'px');
 }).resize();
});