JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    document.documentElement.clientWidth：<span id="viewport"></span>
</p>
<p>
    document.documentElement.scrollWidth：<span id="viewportS"></span>
</p>
<p>
    document.body.scrollWidth：<span id="body"></span>
</p>
<p>
    window.innerWidth：<span id="window"></span>
</p>
<p>
    window.screen.width2：<span id="window2"></span>
</p>
<p>
    window.screen.width3：<span id="window3"></span>
</p>
<p>
    window.screen.width4：<span id="window4"></span>
</p>
<p>
    screen.availWidth：<span id="screen"></span>
</p>
<div id="me" style="width:10%;">
    
</div>
<p>
    10%-width-block.clientWidth：<span id="ten"></span>
</p>
<img src="http://img3.douban.com/view/group_topic/large/public/p9372104.jpg" alt="" class="">
<p>
    img.clientWidth：<span id="img"></span>
</p>

CSS

body { margin: 0; padding: 0; }
			p { margin: 0; padding: 0 ; }

JavaScript

setInterval(function () {
    $("#viewport").text(document.documentElement.clientWidth) ;
    $("#viewportS").text(document.documentElement.scrollWidth) ;
    $("#body").text(document.body.clientWidth) ;
    $("#window").text(window.innerWidth) ;
$("#window2").text(window.screen.width) ;
$("#window3").text(window.devicePixelRatio) ;
$("#window4").text(window.screen.width * window.devicePixelRatio) ;
    $("#screen").text(screen.availWidth) ;
    $("#ten").text($("#me")[0].clientWidth) ;
    $("#img").text($("img")[0].clientWidth) ;
}, 17 );