HTML/CSS - Screen size Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
 <head>
   <title>screen</title>
   <meta name="viewport" width= "device-width" content="width=device-width, initial-scale=1.38, target-densitydpi=device-dpi"/>
 </head>
 <body>
  <table border="2">
   <tr>
     <th>Name</th>
     <th>Width (px)</th>
     <th>Height (px)</th>
   </tr>
   <tr>
     <th>Screen</th>
     <td id="screen_width"></td>
     <td id="screen_height"></td>
   </tr>
   <tr>
     <th>Screen Avail</th>
     <td id="avail_width"></td>
     <td id="avail_height"></td>
   </tr>
   <tr>
     <th>Window Outer</th>
     <td id="outer_Width"></td>
     <td id="outer_Height"></td>
   </tr>

css

html {
    border: 2px solid  red;
    //height: 100%;
    //width: 562px;
}
body {
    border: 2px solid  green;
    //height: 100%;
    //width: 542px;
    //display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    font-size: .78em;
}
table {
    text-align: center;
}
div {
    border: 1px solid  blue;
    background-color:  yellow;
    font-size: .8em;
    text-align: center;
}
#inch {
    width: 1in;
}
#cm {

onload =()=>{
 let docEl = 
 document.documentElement;
 screen_width.innerText = 
 screen.width;
 screen_height.innerText = 
 screen.height;
 
 avail_width.innerText =
 screen.availWidth;
 avail_height.innerText =
 screen.availHeight;
 
 outer_Width.innerText = outerWidth;
 outer_Height.innerText = 
 outerHeight;
 
 inner_Width.innerText = innerWidth;
 inner_Height.innerText = 
 innerHeight;
 
 docEl_scrollWidth.innerText = document.documentElement.scrollWidth;
 docEl_scrollHeight.innerText = 
 docEl.scrollHeight;
 
 docEl_clientWidth.innerText = 
 docEl.clientWidth;
 docEl_clientHeight.innerText = 

BROWSER

Console