understanding viewport width for responsive design - html

Question

after reading a lot about browser viewport width issues, I concluded to make a trial to see that if I understood the concept.
I used javascript below: This script prints "Your viewport width is WidthxHeight"
Element 1: At a 1920 x 1080 resolution, HP x2301 screen without any scroll bar:
JS printed: Your viewport width is 1920x955
Element 2: At a 1920 x 1080 resolution, HP x2301 screen with scroll bar (I increased the height of page with lots of lorem Ipsum string paragraphs):
JS printed: Your viewport width is 1920x955
Element3: At Chrome, I inspected element1 view and element2 view. For element 2, with scroll bar, Chrome wrote width as 1903 pixel, not 1920.
My questions are:
Why element1 and element2 gave the same width? For element2, I was expecting new width = (1920 - scroll bar width). For example Chrome wrote 1903 pixel in its inspection tool.
I declared <meta name="viewport" content="initial-scale=1, width=device-width"> in my header as a meta tag. And in my CSS3, I declared #media screen and (max-width: 1000px) { change something for responsiveness } Since my aim is to be responsive in browser's viewport, does these 2 combination OK? At this point I should say that my viewport definition and aim is pure display width without vertical scroll bar. Because of my understanding, max-width:1000px means to me: be responsive in layout just after pure display width is <=1000px
javascript source link is: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
<script type="text/javascript">
<!--
 
 var viewportwidth;
 var viewportheight;
  
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
  
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
  
 // older versions of IE
  
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
thank you in advance, regards

Answer 1

I got the point.
I changed the JS and got the true viewport width.
JS owner is Vilmantas Baranauskas from SO family.
related SO link: Get the height and width of the browser viewport without scrollbars using jquery?
related script:
<script type="text/javascript">
var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
viewportHeight = document.body.clientHeight;
viewportWidth = document.body.clientWidth;
} else {
viewportHeight = document.documentElement.clientHeight;
viewportWidth = document.documentElement.clientWidth;
}
document.write('<p>Your viewport width without scrollbars is '+viewportHeight+'x'+viewportWidth+'</p>');
</script>
1903 pixel width is true since scroll-bar std width is 17px as I know.
I also recommend to any one to use overflow-y:scroll; code in CSS Body or HTML tag in order to make browser display the scrollbar always even if for a blank draft web page.