Class VisualViewport

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The VisualViewport interface of the CSSOM view API 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.

[Value("VisualViewport")]
public class VisualViewport : EventTarget

Inheritance

object

EventTarget

VisualViewport

Inherited Members

EventTarget.AddEventListener(string, Action, Union26)

EventTarget.AddEventListener(string, Action<MouseEvent>, Union26)

EventTarget.AddEventListener(string, Action<Event>, Union26)

EventTarget.RemoveEventListener(string, Action, Union27)

EventTarget.AddEventListener(string, EventListener, Union26)

EventTarget.RemoveEventListener(string, EventListener, Union27)

EventTarget.DispatchEvent(Event)

EventTarget.When(string, ObservableEventListenerOptions)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

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&apos;s shown on-screen.

You can get a window's visual viewport using VisualViewport.

NOTE

Only the top-level window has a visual viewport that&apos;s distinct from the layout viewport. Therefore, it&apos;s generally only the VisualViewport object of the top-level window that's useful. For an {{htmlelement("iframe")}}, visual viewport metrics like Width always correspond to layout viewport metrics like ClientWidth.

-Web Viewports Explainer — useful explanation of web viewports concepts, including the difference between visual viewport and layout viewport.

See also on MDN

Constructors

VisualViewport()

public VisualViewport()

Properties

Height

The height read-only property of the VisualViewport interface returns the height of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

[Value("height")]
public Number Height { get; }

Property Value

Number

A double.

Remarks

See also on MDN

OffsetLeft

The offsetLeft read-only property of the VisualViewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

[Value("offsetLeft")]
public Number OffsetLeft { get; }

Property Value

Number

A double.

Remarks

See also on MDN

OffsetTop

The offsetTop read-only property of the VisualViewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

[Value("offsetTop")]
public Number OffsetTop { get; }

Property Value

Number

A double.

Remarks

See also on MDN

Onresize

[Value("onresize")]
public EventHandlerNonNull Onresize { get; set; }

Property Value

EventHandlerNonNull

Onscroll

[Value("onscroll")]
public EventHandlerNonNull Onscroll { get; set; }

Property Value

EventHandlerNonNull

Onscrollend

[Value("onscrollend")]
public EventHandlerNonNull Onscrollend { get; set; }

Property Value

EventHandlerNonNull

PageLeft

The pageLeft read-only property of the VisualViewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

[Value("pageLeft")]
public Number PageLeft { get; }

Property Value

Number

A double.

Remarks

See also on MDN

PageTop

The pageTop read-only property of the VisualViewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

[Value("pageTop")]
public Number PageTop { get; }

Property Value

Number

A double.

Remarks

See also on MDN

Scale

The scale read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport, or 0 if current document is not fully active, or 1 if there is no output device.

[Value("scale")]
public Number Scale { get; }

Property Value

Number

A double.

Remarks

See also on MDN

Width

The width read-only property of the VisualViewport interface returns the width of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

[Value("width")]
public Number Width { get; }

Property Value

Number

A double.

Remarks

See also on MDN