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 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" />

Answer 2

The viewport is the visual area of your webpage on a browser.By using the <meta name="viewport" you can set how the content of your site is rendered on different devices. Personally I like to use : <meta name="viewport" content="width=device-width, initial-scale=1.0>

Answer 3

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 4

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 5

The viewport area is the user-visible area on the device, the meta tag is used to set page content width as per viewport so that the content of the page will be scaled down or up as per the viewport width. A good explanation at MDN [https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag].