diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 323e40c4e93fe60..9c5b9d45ba3c0c6 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -10553,6 +10553,7 @@ /en-US/docs/Web/API/View_Transitions_API/Using /en-US/docs/Web/API/View_Transition_API/Using /en-US/docs/Web/API/VisualViewport/onresize /en-US/docs/Web/API/VisualViewport/resize_event /en-US/docs/Web/API/VisualViewport/onscroll /en-US/docs/Web/API/VisualViewport/scroll_event +/en-US/docs/Web/API/Visual_Viewport_API /en-US/docs/Web/API/VisualViewport /en-US/docs/Web/API/WEBGL_compressed_texture_es3 /en-US/docs/Web/API/WEBGL_compressed_texture_etc /en-US/docs/Web/API/WakeLockSentinel/onrelease /en-US/docs/Web/API/WakeLockSentinel/release_event /en-US/docs/Web/API/WaveShaperNode.curve /en-US/docs/Web/API/WaveShaperNode/curve diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 4b88febd2ee0a63..291fa8855906237 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -62085,19 +62085,6 @@ "modified": "2020-10-15T21:57:56.935Z", "contributors": ["chrisdavidmills", "connorshea", "jpmedley"] }, - "Web/API/Visual_Viewport_API": { - "modified": "2020-10-15T21:57:59.333Z", - "contributors": [ - "mhjacobson", - "Sheppy", - "madebyfabian", - "mrvary", - "Rifler", - "ExE-Boss", - "fscholz", - "jpmedley" - ] - }, "Web/API/WEBGL_color_buffer_float": { "modified": "2020-10-15T21:43:41.363Z", "contributors": ["fscholz", "nmve", "teoli"] diff --git a/files/en-us/glossary/layout_viewport/index.md b/files/en-us/glossary/layout_viewport/index.md index d3856b5be073616..35017268cf0b7b7 100644 --- a/files/en-us/glossary/layout_viewport/index.md +++ b/files/en-us/glossary/layout_viewport/index.md @@ -15,6 +15,6 @@ This becomes important, for example, on mobile devices, where a pinching gesture - {{Glossary("Visual viewport")}} - [Viewport concepts](/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts) - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia - [A tale of two viewports](https://www.quirksmode.org/mobile/viewports.html) (Quirksmode) diff --git a/files/en-us/glossary/viewport/index.md b/files/en-us/glossary/viewport/index.md index c276147c003e8d5..ef13e48297f882e 100644 --- a/files/en-us/glossary/viewport/index.md +++ b/files/en-us/glossary/viewport/index.md @@ -19,6 +19,6 @@ The visual viewport of an {{htmlelement("iframe")}}, {{svgelement("svg")}}, or { - {{Glossary("Layout viewport")}} - [Viewport concepts](/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts) - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia - [A tale of two viewports](https://www.quirksmode.org/mobile/viewports.html) (Quirksmode) diff --git a/files/en-us/glossary/visual_viewport/index.md b/files/en-us/glossary/visual_viewport/index.md index af9fe170a627f21..064388c17c490c6 100644 --- a/files/en-us/glossary/visual_viewport/index.md +++ b/files/en-us/glossary/visual_viewport/index.md @@ -13,6 +13,6 @@ The portion of the {{Glossary("viewport")}} that is currently visible is called - {{Glossary("Layout viewport")}} - [Viewport concepts](/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts) - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia - [A tale of two viewports](https://www.quirksmode.org/mobile/viewports.html) (Quirksmode) diff --git a/files/en-us/mozilla/firefox/releases/68/index.md b/files/en-us/mozilla/firefox/releases/68/index.md index 04300a475687969..5478d92e1fda75d 100644 --- a/files/en-us/mozilla/firefox/releases/68/index.md +++ b/files/en-us/mozilla/firefox/releases/68/index.md @@ -98,7 +98,7 @@ _No changes._ #### DOM -- The [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) has now been enabled by default on Android ([Firefox bug 1512813](https://bugzil.la/1512813)). Adding this API to desktop versions of Firefox is being tracked in [Firefox bug 1551302](https://bugzil.la/1551302). +- The [Visual Viewport API](/en-US/docs/Web/API/VisualViewport) has now been enabled by default on Android ([Firefox bug 1512813](https://bugzil.la/1512813)). Adding this API to desktop versions of Firefox is being tracked in [Firefox bug 1551302](https://bugzil.la/1551302). - The {{domxref("Window")}} feature [`noreferrer`](/en-US/docs/Web/API/Window/open) is now supported; if specified, the new window's content is loaded without sharing the hostname, IP address, URL, or other identifying information about the host device ([Firefox bug 1527287](https://bugzil.la/1527287)). - The {{domxref("HTMLImageElement.decode", "decode()")}} method on `HTMLImageElement` is now implemented. This can be used to trigger loading and decoding of an image prior to adding it to the DOM ([Firefox bug 1501794](https://bugzil.la/1501794)). - {{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard `moz-chunked-arraybuffer` value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to [use the Fetch API as a stream](/en-US/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream) ([Firefox bug 1120171](https://bugzil.la/1120171)). diff --git a/files/en-us/mozilla/firefox/releases/91/index.md b/files/en-us/mozilla/firefox/releases/91/index.md index 759e5a2dee35c68..7856b4767fcf413 100644 --- a/files/en-us/mozilla/firefox/releases/91/index.md +++ b/files/en-us/mozilla/firefox/releases/91/index.md @@ -41,7 +41,7 @@ No changes #### DOM -- The [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) is now enabled by default on Firefox desktop releases (it has been enabled on Firefox for Android since version 68). +- The [Visual Viewport API](/en-US/docs/Web/API/VisualViewport) is now enabled by default on Firefox desktop releases (it has been enabled on Firefox for Android since version 68). The API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document, as well as to the window's content area. It also provides events that allow changes to the viewport to be monitored. ([Firefox bug 1551302](https://bugzil.la/1551302)). - The [Gamepad API](/en-US/docs/Web/API/Gamepad_API) is now protected by `Feature-Policy: gamepad`. diff --git a/files/en-us/web/api/viewport/index.md b/files/en-us/web/api/viewport/index.md index c93166121b0f7a6..4e276ddf0e5d851 100644 --- a/files/en-us/web/api/viewport/index.md +++ b/files/en-us/web/api/viewport/index.md @@ -30,6 +30,6 @@ The **`Viewport`** interface of the {{domxref("Viewport Segments API", "Viewport - [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using) - [Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API) -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Device Posture API](/en-US/docs/Web/API/Device_Posture_API) - [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024) diff --git a/files/en-us/web/api/viewport/segments/index.md b/files/en-us/web/api/viewport/segments/index.md index fc60c696bd3ccd0..7db81f7f54aaf41 100644 --- a/files/en-us/web/api/viewport/segments/index.md +++ b/files/en-us/web/api/viewport/segments/index.md @@ -43,5 +43,5 @@ segments.forEach((segment) => ## See also - [Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API) -- [Visual viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024) diff --git a/files/en-us/web/api/viewport_segments_api/index.md b/files/en-us/web/api/viewport_segments_api/index.md index 8553e9a615cfacc..fd521a34b58c930 100644 --- a/files/en-us/web/api/viewport_segments_api/index.md +++ b/files/en-us/web/api/viewport_segments_api/index.md @@ -55,7 +55,7 @@ If possible, you should view the demo on a foldable device. Current browser deve ## See also - [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using) -- [Viewport API](/en-US/docs/Web/API/Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Device Posture API](/en-US/docs/Web/API/Device_Posture_API) - [CSS environment variables](/en-US/docs/Web/CSS/Guides/Environment_variables) module - [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024) diff --git a/files/en-us/web/api/visual_viewport_api/index.md b/files/en-us/web/api/visual_viewport_api/index.md deleted file mode 100644 index e3f17687b7aaaf0..000000000000000 --- a/files/en-us/web/api/visual_viewport_api/index.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Visual Viewport API -slug: Web/API/Visual_Viewport_API -page-type: web-api-overview -browser-compat: - - api.VisualViewport - - api.Window.visualViewport -spec-urls: https://drafts.csswg.org/cssom-view/#visualViewport ---- - -{{DefaultAPISidebar("Visual Viewport")}} - -The **Visual Viewport API** provides an explicit mechanism for querying and modifying the properties of the window's {{Glossary("visual viewport")}}. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. - -## Concepts and usage - -The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport. - -What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch-zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what's shown on-screen. - -To access a window's visual viewport, you can obtain a {{domxref("VisualViewport")}} object from the {{domxref("window.visualViewport")}} property. The object includes a set of properties describing the viewport. It also adds three events, {{domxref("VisualViewport/resize_event", "resize")}}, {{domxref("VisualViewport/scroll_event", "scroll")}}, and {{domxref("VisualViewport/scrollend_event", "scrollend")}}, which fire when the visual viewport is resized, scrolls, and finishes a scrolling action, respectively. - -The first two events allow you to position elements relative to the visual viewport as it is scrolled or zoomed, which would normally be anchored to the layout viewport. The `scrollend` event allows you to update an element when a scrolling action is completed. For example, you can use these events to keep an element fixed to the visual viewport as it is pinch-zoomed and scrolled, and update it when scrolling ends. - -## Interfaces - -- {{DOMxRef("VisualViewport")}} - - : Represents the visual viewport for a given window. A window's `VisualViewport` object provides information about the viewport's position and size, and receives the {{domxref("VisualViewport.resize_event", "resize")}}, {{domxref("VisualViewport.scroll_event", "scroll")}} and {{domxref("VisualViewport.scrollend_event", "scrollend")}} events. - -### Extensions to other interfaces - -- {{domxref("Window.visualViewport")}} {{ReadOnlyInline}} - - : A read-only reference to the window's {{domxref("VisualViewport")}} object. If this property doesn't exist, the API is unsupported. - -## Examples - -Our [Visual Viewport API](https://mdn.github.io/dom-examples/visual-viewport-api/) example provides a basic demonstration of how the different visual viewport features work, including the three event types. Load the page in supporting desktop and mobile browsers and try scrolling around the page and pinch-zooming. On `resize` and `scroll`, the information box is repositioned to keep the same position relative to the visual viewport, and the viewport and scroll information it shows is updated. Also, on `resize` and `scroll` we change the box color to indicate something is happening, changing it back on `scrollend`. - -You'll find that on desktop browsers the {{domxref("Window.scrollX")}} and {{domxref("Window.scrollY")}} values are updated as the window is scrolled — the visual viewport position does not change. On mobile browsers however, the {{domxref("VisualViewport.offsetLeft")}} and {{domxref("VisualViewport.offsetTop")}} values are generally updated — it is usually the visual viewport that changes rather than the window position. - -The example HTML can be seen below. The information box is represented by a {{htmlelement("div")}} with an `id` of `output`. - -```html -

- Try scrolling around and pinch-zooming to see how the reported values change. -

-
-

-
-

-
-``` - -We won't explain the example's CSS for the sake of brevity — it is not important for understanding the demo. You can check it out at the example link above. - -In the JavaScript, we start by getting references to the information box we'll be updating as the page is zoomed and scrolled, as well as the two paragraphs contained within it. The first one will contain reported {{domxref("VisualViewport.offsetLeft")}} and {{domxref("VisualViewport.offsetTop")}} values, while the second one will contain reported {{domxref("Window.scrollX")}} and {{domxref("Window.scrollY")}} values. - -```js -const output = document.getElementById("output"); -const visualInfo = document.getElementById("visual-info"); -const windowInfo = document.getElementById("window-info"); -``` - -Next, we define the two key functions we'll run when the events fire: - -- `scrollUpdater()` will fire on `resize` and `scroll`: this function updates the position of the information box relative to the visual viewport by querying the {{domxref("VisualViewport.offsetTop")}} and {{domxref("VisualViewport.offsetLeft")}} properties and using their values to update the values of the relevant {{glossary("inset properties")}}. We also change the information box's background color to indicate that something is happening, and run the `updateText()` function to update the values shown in the box. -- The `scrollEndUpdater()` function will fire on `scrollend`: this returns the information box to its original color and runs the `updateText()` function to make sure the latest values are shown on `scrollend`. - -```js -const scrollUpdater = () => { - output.style.top = `${visualViewport.offsetTop + 10}px`; - output.style.left = `${visualViewport.offsetLeft + 10}px`; - output.style.background = "yellow"; - updateText(); -}; - -const scrollendUpdater = () => { - output.style.background = "lime"; - updateText(); -}; -``` - -The `updateText()` function looks like so — it sets the {{domxref("HTMLElement.innerText")}} of the first paragraph to show the current `VisualViewport.offsetLeft` and `VisualViewport.offsetTop` values, and the `HTMLElement.innerText` of the second paragraph to show the current `Window.scrollX` and `Window.scrollY` values. After defining `updateText()`, we immediately invoke it so that the information box displays correctly on page load. - -```js -function updateText() { - visualInfo.innerText = `Visual viewport left: ${visualViewport.offsetLeft.toFixed(2)} - top: ${visualViewport.offsetTop.toFixed(2)}`; - windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)} - scrollY: ${window.scrollY.toFixed(2)}`; -} - -updateText(); -``` - -> [!NOTE] -> We truncate all values to two decimal places using the {{jsxref("Number.toFixed()")}} method because some browsers display them as a subpixel value, potentially with a large number of decimal places. - -Now we set event handler properties on both the visual viewport and the {{domxref("Window")}} object to run the key functions at the appropriate times on both mobile and desktop: - -- We set the handlers on `window` so that the information box position and contents will update on conventional window scrolling operations, for example when you scroll the page on a desktop browser. -- We set the handlers on `visualViewport` so that the information box position and contents will update on visual viewport scrolling/zooming operations, for example when you scroll and pinch-zoom the page on a mobile browser. - -```js -visualViewport.onresize = scrollUpdater; -visualViewport.onscroll = scrollUpdater; -visualViewport.onscrollend = scrollendUpdater; -window.onresize = scrollUpdater; -window.onscroll = scrollUpdater; -window.onscrollend = scrollendUpdater; -``` - -`scrollUpdater()` will fire on `resize` and `scroll`, while `scrollEndUpdater()` will fire on `scrollend`. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/visualviewport/index.md b/files/en-us/web/api/visualviewport/index.md index acf7388e56fd621..0b7319b63991cc4 100644 --- a/files/en-us/web/api/visualviewport/index.md +++ b/files/en-us/web/api/visualviewport/index.md @@ -9,6 +9,10 @@ browser-compat: api.VisualViewport The **`VisualViewport`** interface of the {{domxref("Visual Viewport API", "", "", "nocode")}} represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique `VisualViewport` representing the properties associated with that window. +The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport. + +What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch-zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what's shown on-screen. + You can get a window's visual viewport using {{domxref("Window.visualViewport")}}. > [!NOTE] @@ -55,6 +59,83 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent ## Examples +## Getting visual viewport information during scrolling and zooming + +Our [visual viewport](https://mdn.github.io/dom-examples/visual-viewport-api/) example provides a basic demonstration of how the different visual viewport features work, including the three event types. Load the page in supporting desktop and mobile browsers and try scrolling around the page and pinch-zooming. On `resize` and `scroll`, the information box is repositioned to keep the same position relative to the visual viewport, and the viewport and scroll information it shows is updated. Also, on `resize` and `scroll` we change the box color to indicate something is happening, changing it back on `scrollend`. + +You'll find that on desktop browsers the {{domxref("Window.scrollX")}} and {{domxref("Window.scrollY")}} values are updated as the window is scrolled — the visual viewport position does not change. On mobile browsers, however, the {{domxref("VisualViewport.offsetLeft")}} and {{domxref("VisualViewport.offsetTop")}} values are generally updated — it is usually the visual viewport that changes rather than the window position. + +In the example, the HTML information box is represented by a {{htmlelement("div")}} with an `id` of `output` while the CSS is hidden for the sake of brevity. + +```html +

+ Try scrolling around and pinch-zooming to see how the reported values change. +

+
+

+
+

+
+``` + +In the JavaScript, we start by getting references to the information box we'll be updating as the page is zoomed and scrolled, as well as the two paragraphs contained within it. The first one will contain reported {{domxref("VisualViewport.offsetLeft")}} and {{domxref("VisualViewport.offsetTop")}} values, while the second one will contain reported {{domxref("Window.scrollX")}} and {{domxref("Window.scrollY")}} values. + +```js +const output = document.getElementById("output"); +const visualInfo = document.getElementById("visual-info"); +const windowInfo = document.getElementById("window-info"); +``` + +Next, we define the two key functions we'll run when the events fire: + +- The `scrollUpdater()` function will be executed on `resize` and `scroll`: this function updates the position of the information box relative to the visual viewport by querying the {{domxref("VisualViewport.offsetTop")}} and {{domxref("VisualViewport.offsetLeft")}} properties and using their values to update the values of the relevant {{glossary("inset properties")}}. We also change the information box's background color to indicate that something is happening, and run the `updateText()` function to update the values shown in the box. +- The `scrollEndUpdater()` function will fire on `scrollend`: this returns the information box to its original color and runs the `updateText()` function to make sure the latest values are shown on `scrollend`. + +```js +const scrollUpdater = () => { + output.style.top = `${visualViewport.offsetTop + 10}px`; + output.style.left = `${visualViewport.offsetLeft + 10}px`; + output.style.background = "yellow"; + updateText(); +}; + +const scrollendUpdater = () => { + output.style.background = "lime"; + updateText(); +}; +``` + +The `updateText()` function sets the {{domxref("HTMLElement.innerText")}} of the first paragraph to show the current `VisualViewport.offsetLeft` and `VisualViewport.offsetTop` values, and the `HTMLElement.innerText` of the second paragraph to show the current `Window.scrollX` and `Window.scrollY` values. After defining `updateText()`, we immediately invoke it so that the information box displays correctly on page load. + +```js +function updateText() { + visualInfo.innerText = `Visual viewport left: ${visualViewport.offsetLeft.toFixed(2)} + top: ${visualViewport.offsetTop.toFixed(2)}`; + windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)} + scrollY: ${window.scrollY.toFixed(2)}`; +} + +updateText(); +``` + +We truncated all values to two decimal places using the {{jsxref("Number.toFixed()")}} method because some browsers render subpixel values, potentially with a large number of decimal places. + +Now we set event handler properties on both the visual viewport and the {{domxref("Window")}} object to run the key functions at the appropriate times on both mobile and desktop: + +- We set the handlers on `window` so that the information box position and contents will update on conventional window scrolling operations, for example when you scroll the page on a desktop browser. +- We set the handlers on `visualViewport` so that the information box position and contents will update on visual viewport scrolling/zooming operations, for example when you scroll and pinch-zoom the page on a mobile browser. + +```js +visualViewport.onresize = scrollUpdater; +visualViewport.onscroll = scrollUpdater; +visualViewport.onscrollend = scrollendUpdater; +window.onresize = scrollUpdater; +window.onscroll = scrollUpdater; +window.onscrollend = scrollendUpdater; +``` + +The `scrollUpdater()` function will fire on `resize` and `scroll`, while `scrollEndUpdater()` will fire on `scrollend`. + ### Hiding an overlaid box on zoom This example, taken from the [Visual Viewport README](https://github.com/WICG/visual-viewport), shows how to write a bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. A [live sample](https://wicg.github.io/visual-viewport/examples/hide-on-zoom.html) is also available. diff --git a/files/en-us/web/api/visualviewport/resize_event/index.md b/files/en-us/web/api/visualviewport/resize_event/index.md index 2450ea0832170e5..8de9d0be29620b4 100644 --- a/files/en-us/web/api/visualviewport/resize_event/index.md +++ b/files/en-us/web/api/visualviewport/resize_event/index.md @@ -26,7 +26,7 @@ A generic {{domxref("Event")}}. ## Examples -See the [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API#examples) landing page for a usage demo. +See the [`VisualViewport`](/en-US/docs/Web/API/VisualViewport#examples) landing page for a usage demo. ## Specifications diff --git a/files/en-us/web/api/visualviewport/scroll_event/index.md b/files/en-us/web/api/visualviewport/scroll_event/index.md index a720efffadc21ee..5e7a5b5227e5f2b 100644 --- a/files/en-us/web/api/visualviewport/scroll_event/index.md +++ b/files/en-us/web/api/visualviewport/scroll_event/index.md @@ -26,7 +26,7 @@ A generic {{domxref("Event")}}. ## Examples -See the [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API#examples) landing page for a usage demo. +See the [`VisualViewport`](/en-US/docs/Web/API/VisualViewport#examples) landing page for a usage demo. ## Specifications diff --git a/files/en-us/web/api/visualviewport/scrollend_event/index.md b/files/en-us/web/api/visualviewport/scrollend_event/index.md index bc954b3e265c521..49d0e34bb2fd68a 100644 --- a/files/en-us/web/api/visualviewport/scrollend_event/index.md +++ b/files/en-us/web/api/visualviewport/scrollend_event/index.md @@ -26,7 +26,7 @@ A generic {{domxref("Event")}}. ## Examples -See the [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API#examples) landing page for a usage demo. +See the [`VisualViewport`](/en-US/docs/Web/API/VisualViewport#examples) landing page for a usage demo. ## Specifications diff --git a/files/en-us/web/api/window/viewport/index.md b/files/en-us/web/api/window/viewport/index.md index ab85c3dad1256f8..66c546c4afdbc11 100644 --- a/files/en-us/web/api/window/viewport/index.md +++ b/files/en-us/web/api/window/viewport/index.md @@ -40,9 +40,8 @@ const segments = window.viewport.segments; - {{domxref("Viewport.segments")}} property - {{domxref("Viewport")}} interface - {{domxref("VisualViewport")}} interface -- [Viewport API](/en-US/docs/Web/API/Viewport_API) - [Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API) -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - [Viewport concepts](/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts) - [CSS viewport](/en-US/docs/Web/CSS/Guides/Viewport) module - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module diff --git a/files/en-us/web/css/guides/cssom_view/viewport_concepts/index.md b/files/en-us/web/css/guides/cssom_view/viewport_concepts/index.md index d079cf9bed3b49a..29387b529e04941 100644 --- a/files/en-us/web/css/guides/cssom_view/viewport_concepts/index.md +++ b/files/en-us/web/css/guides/cssom_view/viewport_concepts/index.md @@ -152,9 +152,9 @@ Generally, when you write the above media query, the styles are applied if the v ### JavaScript -The [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) provides a mechanism for querying and modifying the properties of the visual viewport. +The [`VisualViewport`](/en-US/docs/Web/API/VisualViewport#examples) interface provides a mechanism for querying and modifying the properties of the visual viewport. -The [Viewport API](/en-US/docs/Web/API/Viewport_API) provides a mechanism for querying and modifying the properties of the visual viewport. +The [`Viewport`](/en-US/docs/Web/API/Viewport) interface provides a mechanism for querying and modifying the properties of the visual viewport. ## Mobile viewports @@ -169,8 +169,7 @@ The `width` property controls the size of the viewport. It should preferably be ## See also - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) +- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) - {{HTMLElement("meta")}}, specifically [``](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) -- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) - [CSS viewport](/en-US/docs/Web/CSS/Guides/Viewport) module - [CSSOM view](/en-US/docs/Web/CSS/Guides/CSSOM_view) module