What is the difference between viewports and device width

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.

Published 13 Mar 2017

Pak Jiddat provides open source scripts and tutorials related to Web Development and System Administration.