View port is the viewable area of a browser where the website is shown.
The device width is physical width of the device where the website is viewed. The view-port can be scaled using the HTML meta tag. e.g the code:
<meta name="viewport" content="initial-scale=2.0,width=device-width" />scales the viewing area of the browser so it is twice the width of the device. It means the viewing area will be scaled so the it looks like the website is being viewed on the device that is twice the width of the actual device.
A simple way of changing the browser viewport is to simply resize the browser window.