What is a view-port?

Asked

Viewed 2,022 times

5

In this my question the user Guilherme Nascimento mentioned a term called view-port in its response to a div and its CSS, this term is unknown to me and has given me some doubts.

Doubts

  1. What is view-port?
  2. What relationship does view-port have with my web application?
  3. There is only the view-port or there is something similar to it?
web-application terminology
  • 1

    This is the browser area where your site or application appears. CSS offers units of measurement proportional to the size of that area.

  • https://answall.com/questions/51244/media-query-não-funciona-em-site-não-responsivo/51248#51248

1 answer

5


What is viewport?

In computer graphics, the viewport is the visible area portion of a plane.

What is the relationship that the viewport has with my web application?

When we talk about responsive web, viewport is the user visible area of a web page. Content that is not visible can only be viewed with a scroll, for example.

Realize that the viewport varies from device to device, for example on computers, tablets and mobile phones. It also varies, for example, when the user resizes the size of his browser on his operating system.

HTML5 has introduced the metatagenglish name="viewport", that lets the developer have control in the visible area of the browser.

There are also relative measures in the CSS that have the size of the viewport as a basis. See:

  • vw: relative to 1% of the width of viewport
  • vh: relative to 1% of the height of the viewport
  • vmin: concerning 1% of the lowest viewport
  • vmax: concerning 1% of the higher dimension of viewport

This greatly facilitates the development of 100% responsive pages.

There is only the viewport or there is something similar to her?

On the web there are two viewports. What is visible is called visual viewport. It is usually smaller than the viewport layout, which is the entire content. When a user gives zoom on the page with your mobile phone, for example, the viewport layout remains the same, who changes (in case decreases) is the visual viewport. See more about this hereenglish.

Browser other questions tagged web-application terminology

You are not signed in. Login or sign up in order to post.