<input
id='update'
type="button"
value="Update">
<table>
<thead>
<tr>
<th>property</th>
<th>size</th>
</tr>
</thead>
<tbody>
<tr>
<td>screen.width</td>
<td><span id="screen_width"></span>px</td>
</tr>
<tr>
<td>screen.availWidth</td>
<td><span id="screen_availWidth"></span>px</td>
</tr>
<tr>
<td>window.outerWidth</td>
<td><span id="window_outerWidth"></span>px</td>
</tr>
<tr>
<td>window.innerWidth</td>
<td><span id="window_innerWidth"></span>px</td>
</tr>
<tr>
<td>document.body.clientWidth</td>
<td><span id="document_body_clientWidth"></span>px</td>
</tr>
<tr>
<td>document.documentElement.clientWidth</td>
<td><span id="document_documentElement_clientWidth"></span>px</td>
</tr>
<tr>
<td>screen.height</td>
<td><span id="screen_height"></span>px</td>
</tr>
<tr>
<td>screen.availHeight</td>
<td><span id="screen_availHeight"></span>px</td>
</tr>
<tr>
<td>window.outerHeight</td>
<td><span id="window_outerHeight"></span>px</td>
</tr>
<tr>
<td>window.innerHeight</td>
<td><span id="window_innerHeight"></span>px</td>
</tr>
<tr>
<td>document.body.clientHeight</td>
<td><span id="document_body_clientHeight"></span>px</td>
</tr>
<tr>
<td>document.documentElement.clientHeight</td>
<td><span id="document_documentElement_clientHeight"></span>px</td>
</tr>
</tbody>
</table>
table {
margin-top: 16px;
border-collapse: collapse;
}
table th, table td {
border: solid 1px #ccc;
padding: 4px;
}
update = () => {
document.getElementById('screen_width').textContent = screen.width
document.getElementById('screen_availWidth').textContent = screen.availWidth
document.getElementById('window_outerWidth').textContent = window.outerWidth
document.getElementById('window_innerWidth').textContent = window.innerWidth
document.getElementById('document_body_clientWidth').textContent = document.body.clientWidth
document.getElementById('document_documentElement_clientWidth').textContent = document.documentElement.clientWidth
document.getElementById('screen_height').textContent = screen.height
document.getElementById('screen_availHeight').textContent = screen.availHeight
document.getElementById('window_outerHeight').textContent = window.outerHeight
document.getElementById('window_innerHeight').textContent = window.innerHeight
document.getElementById('document_body_clientHeight').textContent = document.body.clientHeight
document.getElementById('document_documentElement_clientHeight').textContent = document.documentElement.clientHeight
}
btn = document.getElementById('update')
btn.addEventListener(
'click',
e => update(),
false
)
update()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.