What is viewport in HTML.

Question

What is viewport in HTML? Could you give some examples on how to access the viewport details?

Answer 1

The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page.

Follow this article's instructions to get the viewport dimensions in Javascript.

if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

Answer 2

I think the ViewPort is just an area to display the web content in the browser. And different browsers have their own setting for the size of ViewPort, For example, the default ViewPort width of Safari is 980 pixels. So, if the actual web page you want to see is smaller than 980 pixels, there should be a blank display area in the Safari when accessing the web page in the Safari by default. Hence, that is the reason sometimes we need to configure the ViewPort for better web content display in the browser.

Like below, for example:

<meta name="viewport" content="width=device-width">

And also please read Paul's answer. I think he already explained the usage of ViewPort.

Answer 3

The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized when it is initially rendered on the current screen. This will help you:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />