# viewport

[🔰 JS](../../../../js) ⟩ [browser](../../..) ⟩ [DOM](../..) ⟩ [types](..) ⟩ [Window]() ⟩ viewport

{% hint style="success" %}
<mark style="color:purple;">**viewport size**</mark>

* <mark style="color:orange;">**size**</mark>: ([<mark style="color:orange;">window</mark>]()[.innerWidth](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth), [<mark style="color:orange;">window</mark>]()[.innerHeight](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight)) - <mark style="color:yellow;">**includes scrollbars**</mark> (if present)
* <mark style="color:orange;">**position**</mark>: ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)) - relative to <mark style="color:yellow;">**document**</mark> [coordinates](../../../concepts/coordinates "mention").

returns the width/height of the window's [layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport).
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖解" %}
* [boxes](../element/boxes "mention")

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FyucxBaiTGn30KtrPBrPj%2Ffile.drawing.svg?alt=media&#x26;token=542b1d81-064f-4361-826f-f8daf9ad03ba" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
there are two kinds of viewport:&#x20;

* [layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport) - into which the browser draws a web page.&#x20;
* [visual viewport](https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport) - what is currently visible on the user's display device.
{% endhint %}

{% hint style="info" %}
In [css](../../../../css "mention"), to [position](../../../../css/layout/position) an element <mark style="color:yellow;">**relative to the**</mark>**&#x20;**<mark style="color:orange;">**viewport**</mark> we use <mark style="color:blue;">`position:`</mark><mark style="color:orange;">`fixed`</mark> together with <mark style="color:blue;">left</mark>/<mark style="color:blue;">top</mark> (or <mark style="color:blue;">right</mark>/<mark style="color:blue;">bottom</mark>).
{% endhint %}

{% hint style="warning" %}
如果 <mark style="color:blue;">`<html>`</mark> ([document.documentElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)) 有設定 <mark style="color:blue;">`margin`</mark>/<mark style="color:blue;">`border`</mark>，如：

```css
html {
    border: solid blue 10px;
    margin: 10px;
}
```

則，[document.documentElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement) 的：

* [border](../element/+boxes/border "mention") width = [viewport](viewport "mention") width - <mark style="color:red;">**margin**</mark>
* [padding](../element/+boxes/padding "mention") width = [viewport](viewport "mention") width - <mark style="color:red;">**margin**</mark> - <mark style="color:blue;">**border**</mark>
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [scroll](scroll "mention").
* relative to <mark style="color:yellow;">**viewport**</mark> [coordinates](../../../concepts/coordinates "mention")
  * [bounding](../element/+boxes/bounding "mention") of [element](../element "mention")
  * [doc.elementfrompoint](../document/methods/doc.elementfrompoint "mention") - [element](../element "mention") at that point.
{% endtab %}

{% tab title="👥 相關" %}
* [position](../../../../css/layout/position "mention")
* [padding](../element/+boxes/padding "mention") / [border](../element/+boxes/border "mention") / [scroll](../element/+boxes/scroll "mention")
* [size](../document/size "mention").
* [elem.position](../element/+ext/elem.position "mention") - document [coordinates](../../../concepts/coordinates "mention") of [element](../element "mention").
* [coordinates](../../../concepts/coordinates "mention") relative to document / viewport / container.
* [mouse](../../../event/type/mouse "mention") / [touch](../../../event/type/touch "mention") ⟩
  * (.[clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), .[clientY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)) - relative to [**viewport**](viewport).
  * (.[pageX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX), .[pageY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)) - relative to page (document).
{% endtab %}

{% tab title="💈範例" %}
```javascript
// viewport size
const viewport = {
    get width() { return window.innerWidth },
    get height() { return window.innerHeight },
};
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩&#x20;
  * [ ] [Coordinates](https://tr.javascript.info/coordinates)
  * [ ] [Window sizes and scrolling](https://javascript.info/size-and-scroll-window)
  * [ ] [Element size and scrolling](https://javascript.info/size-and-scroll)
* [ ] [HTML vs Body: How to Set Width and Height for Full Page Size](https://www.freecodecamp.org/news/html-page-width-height/)
{% endtab %}

{% tab title="📘 手冊" %}
* [Viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)
* [](<> "mention") ⟩&#x20;
  * <mark style="color:yellow;">**size**</mark>: ([.innerWidth](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth), [.innerHeight](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight))
  * <mark style="color:yellow;">**position**</mark>: ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)) - relative to <mark style="color:yellow;">**document**</mark> [coordinates](../../../concepts/coordinates "mention").
{% endtab %}
{% endtabs %}
