Calculam dimensiunile browserului (JavaSript)

Stiu, cu ajtorul lui JQuery e simplu, pentru a afla dimensiunile browser-ului apelam doar
$(window).width() sau $(window).height()
dar cum facem fara plugin-uri? sau mai bine zis, folosind plugin-ul vanilla-js (pentru cei ce inteleg ce vreau sa spun)

Pentru a afla resolutia ecranului, e simplu

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

dar nu e deajuns, chiar daca redimensionam browser-ul, rezoluția ramine aceeași. De multe ori, avem nevoia de a determina cât de mult spațiu este disponibil în fereastra browser-ului.
Spațiu în fereastra browser-ului este cunoscut sub numele de “viewport”, care este afectat de rezoluția monitorului, cât de multe bare de instrumente sunt utilizate în cadrul browser-ului și dacă browser-ul este în mod “full screen” sau redimensionat.

Script-ul de mai jos va stoca lățimea și înălțimea viewport în variabilele viewportwidth și viewportheight

1 versiune

<script type="text/javascript">
var viewportwidth;
var viewportheight;

 if (typeof window.innerWidth != 'undefined'){
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }else{
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>'+viewportwidth+'x'+viewportheight+'</p>');
</script>

Versiunea mai scurta
definita de o functie

<script type="text/javascript">

function viewport(){
    var e = window , a = 'inner';
    if ( !( 'innerWidth' in window ) ) {
      a = 'client';
      e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

</script>