CODEWITHSUNDEEP
javascripthtmlcss
cluster1
cluster1

Reputation: 5752

JavaScript: What means "relative to the viewport"?

From MDN Element.getBoundingClientRect-article: MDN article

"The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport."

What is "relative to the viewport"?

Does someone know a page where this is shown with some graphic. The MDN-page misses that sadly ...

Upvotes: 1

Views: 1023

Answers (2)

Zahid Saeed
Zahid Saeed

Reputation: 1181

The Viewport is nothing but the device screen on which your application is running.

From Google:

The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Here are some graphical views. For desktop view, here is the viewport

enter image description here

For Mobile / Tablets, here how it looks like

enter image description here

Note: The images are taken from the google just to demonstrate you

Now Relative to the viewport for Element.getBoundingClientRect() means get the position relative to the viewport, that is from the corners in which your web page is rendered.

I hope that makes sense to you. Feel free to ask any questions :)

Upvotes: 2

tiwo
tiwo

Reputation: 3369

The viewport is the area where your browser shows you (a section) of a website.

>> var header = document.getElementById('question-header')
<div id="question-header">

>> header.getBoundingClientRect()
DOMRect { x: 183.61666870117188, y: 84, width: 1060, height: 54.149993896484375, top: 84, right: 1243.6166687011719, bottom: 138.14999389648438, left: 183.61666870117188 }

getBoundingClientRect()

(source)

Upvotes: 2

Related Questions