VisualViewport.onresize - Web APIs
the onresize event handler of the visualviewport interface is called when a viewport is resized, i.e.
... syntax visualviewport.onresize = function(e) { ...
... } examples visualviewport.onresize = function(e) { ...
... } specifications specification status comment visual viewport apithe definition of 'onresize' in that specification.

VisualViewport.onscroll - Web APIs
the onscroll event handler of the visualviewport interface is called when a viewport is scrolled, i.e.
... syntax visualviewport.onscroll = function(e) { ...
... } examples visualviewport.onscroll = function(e) { ...
... } specifications specification status comment visual viewport apithe definition of 'onscroll' in that specification.

VisualViewport: resize event - Web APIs
the resize event of the visualviewport interface is fired when the visual viewport is resized.
... bubbles no cancelable no interface event event handler property onresize examples you can use the resize event in an addeventlistener method: visualviewport.addeventlistener('resize', function() { ...
... }); or use the onresize event handler property: visualviewport.onresize = function() { ...
... }; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.

VisualViewport: scroll event - Web APIs
the scroll event of the visualviewport interface is fired when the visual viewport is scrolled.
... bubbles no cancelable no interface event event handler property onscroll examples you can use the scroll event in an addeventlistener method: visualviewport.addeventlistener('scroll', function() { ...
... }); or use the onscroll event handler property: visualviewport.onscroll = function() { ...
... }; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.

XRViewport.height - Web APIs
the read-only xrviewport property height specifies the height, in pixels, of the viewport onto the drawing surface within which the webxr view is to be rendered.
... syntax height = xrviewport.height; value the viewport's height in pixels.
... examples see the main xrviewport page for examples.
... specifications specification status comment webxr device apithe definition of 'xrviewport.height' in that specification.

VisualViewport.height - Web APIs
the height read-only property of the visualviewport interface returns the height of the visual viewport, in css pixels.
... syntax var height = visualviewport.height value a double.
... specifications specification status comment visual viewport apithe definition of 'height' in that specification.

VisualViewport.offsetTop - Web APIs
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.
... syntax var offsettop = visualviewport.offsettop value a double.
... specifications specification status comment visual viewport apithe definition of 'offsettop' in that specification.

VisualViewport.offsetleft - Web APIs
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.
... syntax var offsetleft = visualviewport.offsetleft value a double.
... specifications specification status comment visual viewport apithe definition of 'offsetleft' in that specification.

VisualViewport.pageLeft - Web APIs
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.
... syntax var pageleft = visualviewport.pageleft value a double.
... specifications specification status comment visual viewport apithe definition of 'pageleft' in that specification.

VisualViewport.pageTop - Web APIs
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.
... syntax var pagetop = visualviewport.pagetop value a double.
... specifications specification status comment visual viewport apithe definition of 'pagetop' in that specification.

VisualViewport.scale - Web APIs
the scale read-only property of the visualviewport interface returns the pinch-zoom scaling factor applied to the visual viewport.
... syntax var scale = visualviewport.scale value a double.
... specifications specification status comment visual viewport apithe definition of 'scale' in that specification.

VisualViewport.width - Web APIs
the width read-only property of the visualviewport interface returns the width of the visual viewport, in css pixels.
... syntax var width = visualviewport.width value a double.
... specifications specification status comment visual viewport apithe definition of 'width' in that specification.

Window.visualViewport - Web APIs
the visualviewport read-only property of the window interface returns a visualviewport object representing the visual viewport for a given window.
... syntax var visualviewport = window.visualviewport value a visualviewport object.
... specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification.

Index - Web APIs
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
... 998 document: pointercancel event api, document, event, pointerevent, onpointercancel, pointercancel the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... 1039 documentorshadowroot.elementfrompoint() api, coordinates, document, documentorshadowroot, find element, method, point, reference, shadowroot, elementfrompoint, elementfrompoint(), find, shadow dom the elementfrompoint() method—available on both the document and shadowroot objects—returns the topmost element at the specified coordinates (relative to the viewport).
...And 41 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
the preserveaspectratio attribute indicates how an element with a viewbox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
...d red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport.
...scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
...And 25 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
this has a lot of advantages in that the layout will adapt to different viewport dimensions.
...we have used vw (viewport width) units for these — 1vw is equivalent to 1% of the viewport width.
... this makes the dimensions scale up and down nicely along with the viewport width.
...And 17 more matches

Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
... width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.
...And 15 more matches

Responsive design - Learn web development
for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide.
... using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography.
... 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.
...And 12 more matches

Intersection Observer API - Web APIs
the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... the intersection observer api lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount.
...ou: the exact number of pixels that overlap or specifically which ones they are; however, it covers the much more common use case of "if they intersect by somewhere around n%, i need to do something." intersection observer concepts and usage the intersection observer api allows you to configure a callback that is called: (1) whenever one element, called the target, intersects either the device viewport or a specified element; for the purpose of this api, this is called the root element or root (2) and whenever the observer is asked to watch a target for the very first time typically, you'll want to watch for intersection changes with regard to the element's closest scrollable ancestor, or, if the element isn't a descendant of a scrollable element, the viewport.
...And 12 more matches

nsIDOMWindowUtils
is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe); void setcssviewport(in float awidthpx, in float aheightpx); void setdisplayport(in float axpx, in float aypx, in float awidthpx, in float aheightpx); void setresolution(in float axresolution, in float ayresolution); void startpccountprofiling(); void stoppccountprofiling(); void suppresseventhandling(in boolean asuppress); void suspendtimeouts(); ...
...if false, this method returns null for coordinates outside of the viewport.
...if this is false, this method will return null for coordinates outside the viewport.
...And 10 more matches

Responsive images - Learn web development
here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space.
... in viewports below that width, the body will stay at 100% of the width of the viewport.
...in this case, we are saying "when the viewport width is 600 pixels or less".
...And 8 more matches

Element.msZoomTo() - Web APIs
viewportx[in]: the alignment point of the viewport.
...aligns the horizontal center of the viewport to the element's contentx value.
... left: aligns the left-most point of the viewport to the element's contentx value.
...And 8 more matches

Standard metadata names - HTML: Hypertext Markup Language
the css device adaptation specification defines the following metadata name: viewport: gives hints about the size of the initial size of the viewport.
... values for the content of <meta name="viewport"> value possible subvalues description width a positive integer number, or the text device-width defines the pixel width of the viewport that you want the web site to be rendered at.
... height a positive integer, or the text device-height defines the height of the viewport.
...And 7 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
248 layout viewport codingscripting, glossary, layout, layout viewport, viewport the layout viewport is the viewport into which the browser draws a web page.
... essentially, it represents what is available to be seen, while the visual viewport represents what is currently visible on the user's display device.
... 404 scrollport glossary, scrollport the scrollport is the visual viewport of a scroll container in a document.
...And 6 more matches

Sizing items in CSS - Learn web development
viewport units the viewport — which is the visible area of your page in the browser you are using to view a site — also has a size.
... in css we have units which relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height.
... using these units you can size something relative to the viewport of the user.
...And 5 more matches

Window - Web APIs
window.mozinnerscreenx read only returns the horizontal (x) coordinate of the top-left corner of the window's viewport, in screen coordinates.
... window.mozinnerscreeny read only returns the vertical (y) coordinate of the top-left corner of the window's viewport, in screen coordinates.
... window.screenx and window.screenleft read only both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.
...And 5 more matches

Using media queries - CSS: Cascading Style Sheets
screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
... aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4.
... height height of the viewport hover does the primary input mechanism allow the user to hover over elements?
...And 5 more matches

CSS values and units - Learn web development
relative length units relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport.
... vw 1% of the viewport's width.
... vh 1% of the viewport's height.
...And 4 more matches

Introduction to CSS layout - Learn web development
css page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
...static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.
... fixed positioning is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element.
...And 4 more matches

Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
...the initial containing block has the dimensions of the viewport, and is also the block that contains the <html> element.
... simply put, the absolutely positioned element will be displayed outside of the <html> element, and be positioned relative to the initial viewport.
...And 4 more matches

Rendering and the WebXR frame animation callback - Web APIs
this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order.
... for (let view of viewerpose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); mydrawsceneintoview(view, deltatime); } } } the mydrawframe() function grabs the xrsession from the xrframe object specified by the frame parameter, then calls the session's requestanimationframe() method to immediately schedule the rendering of the next frame.
... since webxr uses a single framebuffer for every view, with viewports upon the view being used to separate each eye's viewpoint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) individually.
...And 4 more matches

CSS values and units - CSS: Cascading Style Sheets
for example, em is relative to the font size on the element and vh is relative to the viewport height.
... vw 1% of viewport's width.
... vh 1% of viewport's height.
...And 4 more matches

Mozilla’s UAAG evaluation report
(p2) c preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" 5.2 keep viewport on top.
... 5.3 manual viewport open only.
...t off everywhere: user_pref("capability.policy.default.windowinternal.open", "noaccess"); override popping up new windows on target=anything: user_pref("browser.target_new_blocked", true); override popup windows at beginning of new page load (blocks most popup advertisements): user_pref("dom.disable_open_during_load", true); 5.4 selection and focus in viewport.
...And 3 more matches

nsIDOMClientRect
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description bottom float y-coordinate, relative to the viewport origin, of the bottom of the rectangle box.
... left float x-coordinate, relative to the viewport origin, of the left of the rectangle box.
... right float x-coordinate, relative to the viewport origin, of the right of the rectangle box.
...And 3 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
in a side-scrolling or top-scrolling game such as super mario bros., the camera moves along left and right (or up and down, or both) to ensure that the action remains visible even though the game level is much larger than the viewport.
... making the camera's fov smaller reduces the arc that will be included in the viewport, thus enlarging that content when rendered to the view.
... the following function returns a projection perspective matrix that integrates the specified field of view angle as well as the given near and far clipping plane distances: function createperspectivematrix(viewport, fovdegrees, nearclip, farclip) { const fovradians = fov * (math.pi / 180.0); const aspectratio = viewport.width / viewport.height; const transform = mat4.create(); mat4.perspective(transform, fovradians, aspectratio, nearclip, farclip); return transform; } after converting the fov angle, fovdegrees, from degrees to radians and computing the aspect ratio of the xrviewport specified by the viewport parameter, this function uses the...
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
when rendering the left eye, the xrwebgllayer has its viewport configured to restrict drawing to the left half of the drawing surface.
... contrarily, when rendering the right eye, the viewport is set to restrict drawing to the right half of the surface.
...l.framebuffer, gllayer.framebuffer); logglerror("bindframebuffer"); gl.clearcolor(0, 0, 0, 1.0); gl.cleardepth(1.0); // clear everything gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit); logglerror("glclear"); const deltatime = (time - lastframetime) * 0.001; // convert to seconds lastframetime = time; for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); logglerror(`setting viewport for eye: ${view.eye}`); gl.canvas.width = viewport.width * pose.views.length; gl.canvas.height = viewport.height; drawscene(gl, view, programinfo, buffers, texture, deltatime); } } } the first thing we do is call requestanimationframe...
...And 3 more matches

height - CSS: Cascading Style Sheets
the height css descriptor is a shorthand descriptor for setting both min-height and max-height of the viewport.
... by providing one viewport length value will set both, the minimum height and the maximum height, to the value provided.
... if two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height.
...And 3 more matches

width - CSS: Cascading Style Sheets
the width css descriptor is shorthand for setting both the min-width and the max-width descriptors of the viewport.
... by providing one viewport length value, that value will determine both the min-width and the max-width to the value provided.
... if two viewport values are provided the first value will be set to the min-width and the second value will be set max-width.
...And 3 more matches

Square tilemaps implementation: Scrolling maps - Game development
cameras can either be free-form, controlled by the player (such as in strategy games) or follow an object (such as the main character in platform games.) regardless of the type of camera, we would always need information regarding its current position, viewport size, etc.
... width and height: the size of the camera's viewport.
... maxx and maxy: the limit for the camera's position — the lower limit will nearly always be (0,0), and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport.
...And 2 more matches

Element.getBoundingClientRect() - Web APIs
the element.getboundingclientrect() method returns the size of an element and its position relative to the viewport.
...properties other than width and height are relative to the top-left of the viewport.
... the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle.
...And 2 more matches

SVGSVGElement - Web APIs
svgsvgelement.viewport an svgrect containing the position and size of the viewport (implicit or explicit) that corresponds to the given <svg> element.
...(if the parent uses css or xsl layout, then unitless values represent pixel units for the current css or xsl viewport.) svgsvgelement.pixelunittomillimeterx a float representing the size of the pixel unit (as defined by css2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium.
... svgsvgelement.pixelunittomillimetery a float representing the size of a pixel unit along the y-axis of the viewport.
...And 2 more matches

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css media feature can be used to test the aspect ratio of the viewport.
... syntax the aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport.
... examples the example below is contained in an <iframe>, which creates its own viewport.
...And 2 more matches

@media - CSS: Cascading Style Sheets
aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4.
... height height of the viewport hover does the primary input mechanism allow the user to hover over elements?
... monochrome bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome orientation orientation of the viewport overflow-block how does the output device handle content that overflows the viewport along the block axis?
...And 2 more matches

Visual formatting model - CSS: Cascading Style Sheets
external information (e.g., viewport size, intrinsic dimensions of images, etc.).
... the role of the viewport in continuous media, the viewport is the viewing area of the browser window.
... user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.
...And 2 more matches

<length> - CSS: Cascading Style Sheets
depending on the unit, this can be the size of a specific character, the line height, or the size of the viewport.
... viewport-percentage lengths viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the document.
... viewport lengths are invalid in @page declaration blocks.
...And 2 more matches

position - CSS: Cascading Style Sheets
it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block.
...qua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see css transforms spec), which then causes that ancestor to take the place of the elements containing block.
...even after scrolling, it remains in the same place relative to the viewport.
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
131 markerheight needsexample, svg, svg attribute the markerheight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes.
... 133 markerwidth needsexample, svg, svg attribute the markerwidth attribute represents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes.
... 168 preserveaspectratio svg, svg attribute the preserveaspectratio attribute indicates how an element with a viewbox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
...And 2 more matches

Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
accept-ch: dpr, width, viewport-width, downlink and / or <meta http-equiv="accept-ch" content="dpr, width, viewport-width, downlink"> when a client receives the accept-ch header, if supported, it appends client hint headers that match the advertised field-values.
... for example, based on accept-ch example above, the client could append dpr, width, viewport-width, and downlink headers to all subsequent requests.
... basically, with the client hints header, the developer or application can tell the browser to advertise information about itself to the server, such as the device pixel ratio, the viewport width, and the display width.
... example varying response: vary: accept, dpr, width, viewport-width, downlink see also client hints headers vary http header ...

Legacy layout methods - Learn web development
first, of all, apply the following to your html to provide some basic setup: body { width: 90%; max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport.
...we really want a flexible (fluid) grid that will grow and shrink with the available space in the browser viewport.
...*/ .col.span4 { width: 31.24999999%; } .col.span5 { width: 39.58333332%; } .col.span6 { width: 47.91666665%; } .col.span7 { width: 56.24999998%; } .col.span8 { width: 64.58333331%; } .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } .col.span12 { width: 97.91666663%; } now save your code, load it in a browser, and try changing the viewport width — you should see the column widths adjust nicely to suit.
... on the top line we get twelve neat boxes on the grid and they grow and shrink equally as we change the viewport width.

CSS layout - Learn web development
now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.
... positioning positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
... beginner's guide to media queries the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.

imgIContainer
void decodingcomplete(); obsolete since gecko 2.0 void draw(in gfxcontext acontext, in gfxgraphicsfilter afilter, [const] in gfxmatrix auserspacetoimagespace, [const] in gfxrect afill, [const] in nsintrect asubimage, [const] in nsintsize aviewportsize, in pruint32 aflags); native code only!
...void draw( in gfxcontext acontext, in gfxgraphicsfilter afilter, [const] in gfxmatrix auserspacetoimagespace, [const] in gfxrect afill, [const] in nsintrect asubimage, [const] in nsintsize aviewportsize, in pruint32 aflags ); parameters acontext the thebes context to draw the image to.
... aviewportsize the size (in css pixels) of the viewport that would be available for the full image to occupy, if we were drawing the full image.
... (note that we might not actually be drawing the full image -- we might be restricted by asubimage -- but we still need the full image's viewport-size in order for svg images with the "viewbox" attribute to position their content correctly.) aflags flags of the flag_* variety.

HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
...for instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport.
... images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event.
... that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible.

HTMLImageElement.src - Web APIs
syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fallback for browsers that don't support sizes and srcset; otherwise, it's not used at all.
... html result specifying a fallback for viewport-based selection when using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fallback to be used on browsers that don't support viewport-based selection.
... browsers that do support viewport-based selection will ignore src in this situation.

IntersectionObserver.root - Web APIs
the intersectionobserver interface's read-only root property identifies the element or document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target.
... if the root is null, then the bounds of the actual document viewport are used.
... syntax var root = intersectionobserver.root; value a element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the target element is visible.
... if root is null, then the owning document is used as the root, and the bounds its viewport (that is, the visible area of the document) are used as the root bounds.

Resize Observer API - Web APIs
for example, media queries / window.matchmedia are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container?
... examples you find a couple of simple examples on our github repo: resize-observer-border-radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size.
... when the viewport size is changed, the box's rounded corners change in proportion to the size of the box.
...this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport.

Touch.clientX - Web APIs
the touch.clientx read-only property returns the x coordinate of the touch point relative to the viewport, not including any scroll offset.
... syntax touchitem.clientx; return value a long representing the x coordinate of the touch point relative to the viewport, not including any scroll offset.
...the touch.clientx property is the horizontal coordinate of a touch point relative to the browser's viewport excluding any scroll offset.
... the touch.clienty property is the vertical coordinate of the touch point relative to the browser's viewport excluding any scroll offset .

Touch.clientY - Web APIs
the touch.clienty read-only property returns the y coordinate of the touch point relative to the browser's viewport, not including any scroll offset.
... syntax touchitem.clienty; return value a long value representing the y coordinate of the touch point relative to the viewport, not including any scroll offset.
...the touch.clientx property is the horizontal coordinate of a touch point relative to the browser's viewport excluding any scroll offset.
... the touch.clienty property is the vertical coordinate of the touch point relative to the browser's viewport excluding any scroll offset .

Touch.pageX - Web APIs
the touch.pagex read-only property returns the x coordinate of the touch point relative to the viewport, including any scroll offset.
... syntax touchitem.pagex; return value a long representing the x coordinate of the touch point relative to the viewport, including any scroll offset.
...the touch.pagex property is the horizontal coordinate of a touch point relative to the viewport (in css pixels), including any scroll offset.
... the touch.pagey property is the vertical coordinate of a touch point relative to the viewport (in css pixels), including any scroll offset.

Touch.pageY - Web APIs
the touch.pagey read-only property returns the y coordinate of the touch point relative to the viewport, including any scroll offset.
... syntax touchitem.pagey; return value a long value that representes the y coordinate of the touch point relative to the viewport, including any scroll offset.
...the touch.pagex property is the horizontal coordinate of a touch point relative to the viewport (in css pixels), including any scroll offset.
... the touch.pagey property is the vertical coordinate of a touch point relative to the viewport (in css pixels), including any scroll offset.

Window.innerWidth - Web APIs
more precisely, innerwidth returns the width of the window's layout viewport.
... the interior height of the window—the height of the layout viewport—can be obtained from the innerheight property.
... syntax let intviewportwidth = window.innerwidth; value an integer value indicating the width of the window's layout viewport in pixels.
... example // this will return the width of the viewport var intframewidth = window.innerwidth; // this will return the width of the frame viewport within a frameset var intframewidth = self.innerwidth; // this will return the width of the viewport of the closest frameset var intframesetwidth = parent.innerwidth; // this will return the width of the viewport of the outermost frameset var intouterframesetwidth = top.innerwidth; specification ...

-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
...ttachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /* global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... fixed if fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.

orientation - CSS: Cascading Style Sheets
the orientation css media feature can be used to test the orientation of the viewport (or the page box, for paged media).
...opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
... keyword values portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
... landscape the viewport is in a landscape orientation, i.e., the width is greater than the height.

max-height - CSS: Cascading Style Sheets
the max-height css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule.
... the height will initially be set as close as possible to the initial viewport height considering the maximum height constraint.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max-height" descriptor' in that specification.

max-width - CSS: Cascading Style Sheets
the max-width css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule.
... by default, the width is set as close as possible to the initial viewport considering the maximum width constraint.
... <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.

min-height - CSS: Cascading Style Sheets
the min-height css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule.
... the height will initially be set as close as possible to the initial viewport height considering the minimum height constraint.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min-height" descriptor' in that specification.

min-width - CSS: Cascading Style Sheets
the min-width css descriptor specifies the minimum width of the viewport of a document defined via @viewport.
... by default, min-width is set as close as possible to the initial viewport considering the minimum width constraint.
... <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.

CSS reference - CSS: Cascading Style Sheets
ngsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typelead...
...lock-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate...
...:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqqu...
...ne-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various selectors, which allow styles to be conditional based on various features of elements within the dom.

env() - CSS: Cascading Style Sheets
to tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); } in addition, unlike custom properties, which cannot be used outside of declarations, the env() function can be used in place of any part of a property value, or an...
... originally provided by the ios browser to allow developers to place their content in a safe area of the viewport, the safe-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
... values */ env(safe-area-inset-top, 20px); env(safe-area-inset-right, 1em); env(safe-area-inset-bottom, 0.5vh); env(safe-area-inset-left, 1.4rem); values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left the safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display.
... for rectangular viewports, like your average laptop monitor, their value is equal to zero.

<img>: The Image Embed element - HTML: Hypertext Markup Language
loading indicates how the browser should load the image: eager: loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
... lazy: defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser.
... media conditions describe properties of the viewport, not of the image.
... for example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px.

Critical rendering path - Web Performance
unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport.
... the viewport meta tag defines the width of the layout viewport, impacting the layout.
... without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px.
... on by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width.

<svg> - SVG: Scalable Vector Graphics
the svg element is a container that defines a new coordinate system and viewport.
... value type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport.
... value type: <number> ; default value: none; animatable: no viewbox the svg viewport coordinates for the current svg fragment.
... value type: <list-of-numbers> ; default value: none; animatable: yes width the displayed width of the rectangular viewport.

Mobile accessibility - Learn web development
such issues can be solved by creating a responsive layout using technologies such as media queries, viewport, and flexbox.
... not disabling zoom using viewport, it is possible to disable zoom.
... always ensure resizing is enabled, and set the width to the device's width in the <head>: <meta name="viewport" content="width=device-width; user-scalable=yes"> you should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea.

Practical positioning examples - Learn web development
change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add position: fixed;, and stick it to the top of the browser viewport.
... next, we set a fixed width on the panel, and make its height the entire height of the browser viewport.
...we glue it to the top of the viewport, and set it so that by default it is offscreen to the right.

Drawing graphics - Learn web development
in the second line we set both a new constant width and the canvas' width property equal to window.innerwidth (which gives us the viewport width).
... in the third line we set both a new constant height and the canvas' height property equal to window.innerheight (which gives us the viewport height).
...we have to draw the circle 85 pixels above where we measured it from, because the vertical measurement is taken from the top of the viewport, but we are drawing the circle relative to the top of the canvas, which starts below the 85 pixel-high toolbar.

Manipulating documents - Learn web development
first of all, let's grab a reference to the div, and then grab the width and height of the viewport (the inner window, where your document is displayed) and store them in variables — these two values are handily contained in the window.innerwidth and window.innerheight properties.
... add the following lines inside the existing <script> element: const div = document.queryselector('div'); let winwidth = window.innerwidth; let winheight = window.innerheight; next, we'll dynamically alter the width and height of the div to equal that of the viewport.
... add the following two lines below your first ones: div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; save and try refreshing your browser — you should now see the div become as big as your viewport, whatever size of screen your are using.

Object building practice - Learn web development
next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties).
...this can range between 0 (top left hand corner) to the width and height of the browser viewport (bottom right hand corner).
... open the browser's javascript console, and then refresh the page so that the canvas size changes to the smaller visible viewport that remains when the console opens.

Debugging Frame Reflow
4 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 tbl 02d7b7ec d=1500,390 tblo 02d7b5f0 d=1500,390 text 02d7c130 r=0 a=8940,uc c=uc,uc cnt=885 text 02d7c130 d=0,0 block 02d7b210 d=8940,390 area 02d7afe4 d=9180,630 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 the first line shows the reflow of the viewport (vp).
... this viewport has the address 00b97c30.
...on cell tablecell bccell bctablecell col tablecol colg tablecolgroup tbl table tblo tableouter rowg tablerowgroup row tablerow textctl textinput text text vp viewport once the problem is reduced to a single frame level, placing a breakpoint at displayreflowenterprint in nsframe.cpp is a very efficient way to step through the reflow tree.

Experimental features in Firefox
nightly 31 yes developer edition 31 no beta 31 no release 31 no preference name layout.css.getboxquads.enabled geometryutils method: getboxquads() the geometryutils method getboxquads() returns the css boxes for a node relative to any other node or viewport.
... nightly 56 no developer edition 56 no beta 56 no release 56 no preference name dom.payments.request.enabled and dom.payments.request.supportedregions visual viewport api the visual viewport api provides access to information describing the position of the visual viewport relative to the document as well as to the window's content area.
... nightly 63 no developer edition 63 no beta 63 no release 63 starting in firefox 68, on android only preference name dom.visualviewport.enabled constructable stylesheets the addition of a constructor to the cssstylesheet interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the html.

mozbrowserresize
the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way.
... details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels.
... height a number representing the new height of the <iframe> viewport, in device pixels.

Gecko Roles
its children can include scroll bars and a viewport.
... role_viewport a viewport.
...as the user manipulates the scroll bars, the contents of the viewport can change.

nsIAccessibleRole
its children can include scroll bars and a viewport.
... role_viewport 95 a viewport.
...as the user manipulates the scroll bars, the contents of the viewport can change.

Responsive Design Mode - Firefox Developer Tools
the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want.
... on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support.
... device selection just above the viewport there is a label "no device selected"; click this to see a list of device names.

CanvasRenderingContext2D.drawWindow() - Web APIs
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
... drawwindow_draw_view 0x04 draw scrollbars and scroll the viewport if they are present.
...would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas.

Document.caretRangeFromPoint() - Web APIs
syntax var range = document.caretrangefrompoint(float x, float y); parameters x a horizontal position within the current viewport.
... y a vertical position within the current viewport.
... null, if x or y are negative, outside viewport, or there is no text entry node.

DocumentOrShadowRoot.elementFromPoint() - Web APIs
the elementfrompoint() method—available on both the document and shadowroot objects—returns the topmost element at the specified coordinates (relative to the viewport).
... syntax const element = document.elementfrompoint(x, y) parameters x the horizontal coordinate of a point, relative to the left edge of the current viewport.
... y the vertical coordinate of a point, relative to the top edge of the current viewport.

Element.getClientRects() - Web APIs
each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport.
...when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).
... the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.

IntersectionObserver - Web APIs
the intersectionobserver interface of the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... the ancestor element or viewport is referred to as the root.
...if no root value was passed to the constructor or its value is null, the top-level document's viewport is used.

Timing element visibility with the Intersection Observer API - Web APIs
the options are configured to watch for intersections with the document's viewport (by setting root to null).
... we have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes.
...then we call the observe() method on our intersection observer, adobserver, to start watching the ad for changes to its intersection with the viewport.

VTTRegion - Web APIs
vttregion.viewportanchorx a double representing the viewport anchor x offset, as a percentage of the video.
... vttregion.viewportanchory a double representing the viewport anchor y offset, as a percentage of the video.
...region.viewportanchorx = 25; // have the region start at 25% from the left.

WebGLRenderingContext.depthRange() - Web APIs
the webglrenderingcontext.depthrange() method of the webgl api specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
... syntax void gl.depthrange(znear, zfar); parameters znear a glclampf specifying the mapping of the near clipping plane to window or viewport coordinates.
... zfar a glclampf specifying the mapping of the far clipping plane to window or viewport coordinates.

WebGLRenderingContext.getParameter() - Web APIs
gl.max_fragment_uniform_vectors glint gl.max_renderbuffer_size glint gl.max_texture_image_units glint gl.max_texture_size glint gl.max_varying_vectors glint gl.max_vertex_attribs glint gl.max_vertex_texture_image_units glint gl.max_vertex_uniform_vectors glint gl.max_viewport_dims int32array (with 2 elements) gl.pack_alignment glint gl.polygon_offset_factor glfloat gl.polygon_offset_fill glboolean gl.polygon_offset_units glfloat gl.red_bits glint gl.renderbuffer_binding webglrenderbuffer or null see bindrenderbuffer.
...inding_2d webgltexture or null gl.texture_binding_cube_map webgltexture or null gl.unpack_alignment glint gl.unpack_colorspace_conversion_webgl glenum gl.unpack_flip_y_webgl glboolean gl.unpack_premultiply_alpha_webgl glboolean gl.vendor domstring gl.version domstring gl.viewport int32array (with 4 elements) webgl 2 you can query the following pname parameters when using a webgl2renderingcontext.
... examples gl.getparameter(gl.dither); gl.getparameter(gl.version); gl.getparameter(gl.viewport); specifications specification status comment webgl 1.0the definition of 'getparameter' in that specification.

WebGLRenderingContext - Web APIs
webglrenderingcontext.viewport() sets the viewport.
... webglrenderingcontext.depthrange() specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
..." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.

WebXR Device API - Web APIs
xrviewport describes a viewport.
... a viewport is a rectangular portion of a graphic surface.
... in webxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene.

Window.innerHeight - Web APIs
the value of innerheight is taken from the height of the window's layout viewport.
... syntax let intviewportheight = window.innerheight; value an integer value indicating the window's layout viewport height in pixels.
... example assuming a frameset var intframeheight = window.innerheight; // or var intframeheight = self.innerheight; // will return the height of the frame viewport within the frameset var intframesetheight = parent.innerheight; // will return the height of the viewport of the closest frameset var intouterframesetheight = top.innerheight; // will return the height of the viewport of the outermost frameset fixme: link to an interactive demo here to change the size of a window, see window.resizeby() and window.resizeto().

XRView - Web APIs
the destination rendering layer to render a frame, you just iterate over the xrviewerpose's views, rendering each of them into the appropriate viewport within the frame's xrwebgllayer.
...the xrviewport for each view is used to position the rendering into the correct half of the layer.
... examples preparing to render every view for a pose to draw eerything the user sees each frame requires iterating over the list of views returned by the xrviewerpose object's views list: for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); // draw the scene; the eye being drawn is identified // by view.eye.

XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
now we can see the coordinates of each of the viewports representing these two views: since each eye gets half of the frame buffer, the result is that the left eye gets a 640x720 portion of the buffer with the viewport's x and y at 0, the width at 640, and the height set to 720.
... the right eye gets the other half of the frame buffer, with its viewport's x set at 639.
... while rendering a frame for this scene, we get the viewport for the view and apply it to webgl, then render the scene.

XRWebGLLayer - Web APIs
in particular, it provides access to the webgl framebuffer and viewport to ease access to the context.
... methods getviewport() returns a new xrviewport instance representing the position, width, and height to which the webgl context's viewport must be set to contain drawing to the area of the framebuffer designated for the specified view's contents.
... let pose = xrframe.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebffer); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the view */ } } specifications specification status comment webxr device apithe definition of 'xrwebgllayer' in that specification.

Web APIs
ion apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...rface usbconfiguration usbdevice usbendpoint usbintransferresult usbinterface usbisochronousintransferpacket usbisochronousintransferresult usbisochronousouttransferpacket usbisochronousouttransferresult usbouttransferresult usvstring userdatahandler userproximityevent v vttcue vttregion validitystate videoconfiguration videoplaybackquality videotrack videotracklist visualviewport w webgl_color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context wakelock wakelocksentinel waveshapernode webgl2rend...
...ent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit xrrigidtransform xrsession xrsessionevent xrsessioneventinit xrsessioninit xrsessionmode xrspace xrsystem xrtargetraymode xrview xrviewerpose xrviewport xrvisibilitystate xrwebgllayer xrwebgllayerinit xsltprocessor ...

height - CSS: Cascading Style Sheets
the height css media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media).
... syntax the height feature is specified as a <length> value representing the viewport height.
... examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification.

width - CSS: Cascading Style Sheets
the width css media feature can be used to test the width of the viewport (or the page box, for paged media).
... syntax the width feature is specified as a <length> value representing the viewport width.
... examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'width' in that specification.

Layout and the containing block - CSS: Cascading Style Sheets
if the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).
...it has the dimensions of the viewport (for continuous media) or the page area (for paged media).
...width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport).

Sticky footers - CSS: Cascading Style Sheets
a sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
... requirements the sticky footer pattern needs to meet the following requirements: footer sticks to the bottom of the viewport when content is short.
... if the content of the page extends past the viewport bottom, the footer then sits below the content as normal.

scroll-snap-type-x - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-type-x: none; scroll-snap-type-x: mandatory; scroll-snap-type-x: proximity; /* global values */ scroll-snap-type-x: inherit; scroll-snap-type-x: initial; scroll-snap-type-x: unset; syntax values none when the visual viewport of this scroll container is scrolled horizontally, it must ignore snap points.
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally.
... proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled horizontally considering the user agent's scroll parameters.

scroll-snap-type-y - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-type-y: none; scroll-snap-type-y: mandatory; scroll-snap-type-y: proximity; /* global values */ scroll-snap-type-y: inherit; scroll-snap-type-y: initial; scroll-snap-type-y: unset; syntax values none when the visual viewport of this scroll container is scrolled vertically, it must ignore snap points.
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically.
... proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled vertically considering the user agent's scroll parameters.

scroll-snap-type - CSS: Cascading Style Sheets
oll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; syntax values none when the visual viewport of this scroll container is scrolled, it must ignore snap points.
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled.
... proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters.

HTTP headers - HTTP
dpr a number that indicates the client’s current device pixel ratio (dpr), which is the ratio of physical pixels over css pixels (section 5.2 of [cssval]) of the layout viewport (section 9.1.1 of [css2]) on the device.
... viewport-width a number that indicates the layout viewport width in css pixels.
... if viewport-width occurs in a message more than once, the last value overrides all previous occurrences.

Populating the page: how browsers work - Web Performance
different devices and different desktop preferences mean an unlimited number of differing viewport sizes.
... in this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen.
... taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image.

Lazy loading - Web Performance
<img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded.
... polyfill include this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the browser’s viewport.
... event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...

Progressive loading - Progressive web apps (PWAs)
this problem can be solved with the new intersection observer api — using this we can ensure that images will be loaded only when they appear in the viewport.
... intersection observer this is a progressive enhancement to the previously working example — intersection observer will load target images only when the user scrolls down, causing them to display in the viewport.
...is appearing inside the viewport).

Mobile first - Progressive web apps (PWAs)
for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first.
... if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain.
... mobile constraints we have already mentioned the fact that mobiles generally have less memory, processing power and bandwidth than other devices (although bear in mind that smart tvs are also generally pretty low powered.) they also have less viewport size available.

clip - SVG: Scalable Vector Graphics
the value of auto defines a clipping path along the bounds of the viewport created by the given element.
... value auto | rect() default value auto animatable yes the value auto defines a clipping path along the bounds of the viewport created by the given element.the value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>).
... the <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of the element viewport.

requiredFeatures - SVG: Scalable Vector Graphics
g-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#gradient ht...
... http://www.w3.org/tr/svg11/feature#viewportattribute the browser supports the clip and overflow attributes.
...svg11/feature#image</text> <!-- testing : http://www.w3.org/tr/svg11/feature#style --> <rect class="ko" x="10" y="360" height="25" width="430" /> <rect class="ok" x="10" y="360" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#style" /> <text x="20" y="377">http://www.w3.org/tr/svg11/feature#style</text> <!-- testing : http://www.w3.org/tr/svg11/feature#viewportattribute --> <rect class="ko" x="10" y="385" height="25" width="430" /> <rect class="ok" x="10" y="385" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#viewportattribute" /> <text x="20" y="402">http://www.w3.org/tr/svg11/feature#viewportattribute</text> <!-- testing : http://www.w3.org/tr/svg11/feature#shape --> <rect class="ko" x="10" y="410" height="2...

viewBox - SVG: Scalable Vector Graphics
the viewbox attribute defines the position and dimension, in user space, of an svg viewport.
...the numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated svg element (not the browser viewport).
...box` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the center of the viewport the value 50% is resolve to 5 which means the center of the circle is in the bottom/right corner of the viewport.

<marker> - SVG: Scalable Vector Graphics
points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
... value type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport.
... value type: top|center|bottom|<coordinate> ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current svg fragment.

CSS3 - Archive of obsolete content
definition for viewport-relative length units: vw, vh, vmax, and vmin .
... css overflow module level 3 working draft css basic box model working draft css scrollbars level 1 working draft modules in the exploring phase css backgrounds and borders level 4 working draft css device adaptation working draft adds a new at-rule, @viewport, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
clientx clientx the x coordinate of the event, in relation to the element viewport.
... clienty clienty the y coordinate of the event, in relation to the element viewport.

Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).
... review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc.

MDN Web Docs Glossary: Definitions of Web-related terms
instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k key keyword l latency layout viewport lazy load lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to right) m main axis main thread markup mathml media media (audio-visual presentation...
...hy ttl turn type type coercion type conversion u udp (user datagram protocol) ui undefined unicode uri url urn usenet user agent utf-8 ux v validator value variable vendor prefix viewport visual viewport voip w w3c wai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace wo...

How CSS is structured - Learn web development
however, a media query follows that defines a blue background if the browser viewport is wider than 30em.
... see if you can add a media query that changes styles based on the viewport width.

Mozilla splash page - Learn web development
in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise.
... an art directed red panda inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if the viewport is 600px wide or less, and the large landscape image otherwise.

Index - Learn web development
123 sizing items in css beginner, css, intrinsic size, learn, max size, min size, percentage, sizing, viewport units this lesson has given you a rundown of some key issues that you might run into when sizing things on the web.
...now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.

Web performance resources - Learn web development
lazy loading parts of your application outside the viewport.
... <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.

mozbrowsercontextmenu
details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport.
... clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport.

mozbrowserscroll
details the details property returns an anonymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport.
... left a number representing the new horizontal scroll position of the <iframe> viewport — in css pixels — from the left of the viewport.

mozbrowserscrollareachanged
details the details property returns an anonymous javascript object with the following properties: width a number representing the new scroll area width of the <iframe> viewport, in css pixels.
... height a number representing the new scroll area height of the <iframe> viewport, in css pixels.

IAccessibleTable
[propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok.
...[propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) return value s_ok.

IAccessibleTable2
[propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok.
...[propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) return value s_ok.

nsIContentView
viewportheight float height of the viewport in chrome-document css pixels.
... viewportwidth float width of the viewport in chrome-document css pixels.

nsIFrameLoader
sendcrossprocesskeyevent() creates and sends a keyevent to the content viewport's process.
... sendcrossprocessmouseevent() creates and sends a mouseevent to the content viewport's process.

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
extend lines infinitely: by default, grid lines/tracks are only shown inside the element with display: grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis.
... when you check the "extend lines infinitely" option, the grid lines extend to the edge of the viewport along each axis.

Basic animations - Web APIs
<canvas id="canvas" width="800" height="200"></canvas> mouse following animation <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script> var cn; //= document.getelementbyid('cw'); var c; var u = 10; const m = { x: innerwidth / 2, y: innerheight / 2 }; window.
... z-index: -1; } body { margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" onclick="emit(38)">&#8593;</div> <div class="right" onclick="emit(39)">&#8594;</div> <div class="left" onclick="emit(37)">&#8592;</div> <div class...

HTMLImageElement.height - Web APIs
further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width.
... html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px.

HTMLImageElement.width - Web APIs
further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width.
... html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px.

IntersectionObserver.IntersectionObserver() - Web APIs
if options isn't specified, the observer uses the document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback).
... you can provide any combination of the following options: root an element or document object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport.

MediaQueryList - Web APIs
for example, if the media query is (min-width: 400px), the change event is fired any time the width of the document's viewport changes such that its width moves across the 400px boundary in either direction.
... var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addeventlistener('change', screentest); ...

ResizeObserverEntry.contentBoxSize - Web APIs
this example includes a green box, sized as a percentage of the viewport size.
... when the viewport size is changed, the box's rounded corners change in proportion to the size of the box.

ResizeObserverEntry.target - Web APIs
this example includes a green box, sized as a percentage of the viewport size.
... when the viewport size is changed, the box's rounded corners change in proportion to the size of the box.

SVGGraphicsElement - Web APIs
svggraphicselement.getctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to its svg viewport's coordinate system.
... svggraphicselement.getscreenctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to the coordinate system of the svg viewport for the svg document fragment.

Touch - Web APIs
touch.clientx read only returns the x coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.
... touch.clienty read only returns the y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.

Touch events - Web APIs
the touch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport.
...vior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but still allow panning with both fingers; android will allow zooming but not panning; opera and firefox currently prevent all panning and zooming.) currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

A basic 2D WebGL animation example - Web APIs
function animatescene() { gl.viewport(0, 0, glcanvas.width, glcanvas.height); gl.clearcolor(0.8, 0.9, 1.0, 1.0); gl.clear(gl.color_buffer_bit); let radians = currentangle * math.pi / 180.0; currentrotation[0] = math.sin(radians); currentrotation[1] = math.cos(radians); gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocat...
...in this case, we set the viewport based on the size of the <canvas>, call clearcolor() to set the color to use when clearing content, then we clear the buffer with clear().

Clearing by clicking - Web APIs
// otherwise, initialize the drawing buffer (the viewport).
... if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.

Clearing with colors - Web APIs
otherwise, initialize // the drawing buffer (the viewport) and clear the context // with a solid color.
..."; gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); // set the clear color to darkish green.

WebGL constants - Web APIs
ue_mask 0x0b93 stencil_writemask 0x0b98 stencil_back_func 0x8800 stencil_back_fail 0x8801 stencil_back_pass_depth_fail 0x8802 stencil_back_pass_depth_pass 0x8803 stencil_back_ref 0x8ca3 stencil_back_value_mask 0x8ca4 stencil_back_writemask 0x8ca5 viewport 0x0ba2 returns an int32array with four elements for the current viewport dimensions.
... color_clear_value 0x0c22 color_writemask 0x0c23 unpack_alignment 0x0cf5 pack_alignment 0x0d05 max_texture_size 0x0d33 max_viewport_dims 0x0d3a subpixel_bits 0x0d50 red_bits 0x0d52 green_bits 0x0d53 blue_bits 0x0d54 alpha_bits 0x0d55 depth_bits 0x0d56 stencil_bits 0x0d57 polygon_offset_units 0x2a00 polygon_offset_factor 0x8038 texture_binding_2d 0x8069 sample_buffers 0x80a8 samples 0x80a9 ...

Web Video Text Tracks Format (WebVTT) - Web APIs
there are several properties of vttregion which are width, lines, regionanchorx, regionanchory, viewportanchorx, viewportanchory and scroll that can be used to specify the look and feel of this vtt region.
... the interface code is given below which can be used to expose the webvtt regions in dom api: enum scrollsetting { "" /* none */, "up" }; [constructor] interface vttregion { attribute double width; attribute long lines; attribute double regionanchorx; attribute double regionanchory; attribute double viewportanchorx; attribute double viewportanchory; attribute scrollsetting scroll; }; methods and properties the methods used in webvtt are those which are used to alter the cue or region as the attributes for both interfaces are different.

Web audio spatialization basics - Web APIs
the boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls.
...here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox.

Window.screenLeft - Web APIs
the window.screenleft read-only property returns the horizontal distance, in css pixels, from the left border of the user's browser viewport to the left side of the screen.
... syntax leftwindowpos = window.screenleft returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen.

Window.screenTop - Web APIs
the window.screentop read-only property returns the vertical distance, in css pixels, from the top border of the user's browser viewport to the top side of the screen.
... syntax topwindowpos = window.screentop returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen.

Window.screenX - Web APIs
the window.screenx read-only property returns the horizontal distance, in css pixels, of the left border of the user's browser viewport to the left side of the screen.
... syntax leftwindowpos = window.screenx returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen.

Window.screenY - Web APIs
the window.screeny read-only property returns the vertical distance, in css pixels, of the top border of the user's browser viewport to the top edge of the screen.
... syntax topwindowpos = window.screeny returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen.

Window.scrollX - Web APIs
in more technical terms, scrollx returns the x coordinate of the left edge of the current viewport.
... if there is no viewport, the returned value is 0.

Window.scrollY - Web APIs
in more technical terms, scrolly returns the y coordinate of the top edge of the current viewport.
... if there is no viewport, the returned value is 0.

XRView.transform - Web APIs
const modelviewmatrix = mat4.create(); const normalmatrix = mat4.create(); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); for (let obj of world.objects) { mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, obj.matrix); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); obj.render(modelviewmatrix, normalmatrix); } } two matrices are created outsid...
... for each view, we obtain its viewport and pass that to webgl using gl.viewport().

XRViewerPose - Web APIs
by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
... let pose = frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.

::backdrop - CSS: Cascading Style Sheets
the ::backdrop css pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.
... /* backdrop is only displayed when dialog is opened with dialog.showmodal() */ dialog::backdrop { background: rgba(255,0,0,.25); } all full-screen elements are placed in a last-in/first out (lifo) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen.

max-zoom - CSS: Cascading Style Sheets
the max-zoom css descriptor sets the maximum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.

min-zoom - CSS: Cascading Style Sheets
the min-zoom css descriptor sets the minimum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.

orientation - CSS: Cascading Style Sheets
the orientation css descriptor controls the orientation of a document defined by @viewport.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.

user-zoom - CSS: Cascading Style Sheets
the user-zoom css descriptor controls whether or not the user can change the zoom factor of a document defined by @viewport.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.

zoom - CSS: Cascading Style Sheets
the zoom css descriptor sets the initial zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specification.

CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of css that lets you define the size, zoom factor, and orientation of the viewport.
... reference at-rules @viewport specifications specification status comment css device adaptation working draft initial definition ...

Grid wrapper - CSS: Cascading Style Sheets
using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context.
...t auto margins to center the content horizontally: .grid { max-width: 1200px; margin: 0 auto; // horizontally centers the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.

Testing media queries programmatically - CSS: Cascading Style Sheets
for example, to set up a query list that determines if the device is in landscape or portrait orientation: const mediaquerylist = window.matchmedia("(orientation: portrait)"); checking the result of a query once you've created your media query list, you can check the result of the query by looking at the value of its matches property: if (mediaquerylist.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifications if you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result.
... the handleorientationchange() function would look at the result of the query and handle whatever we need to do on an orientation change: function handleorientationchange(evt) { if (evt.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is currently in landscape orientation */ } } above, we define the parameter as evt — an event object.

background-attachment - CSS: Cascading Style Sheets
the background-attachment css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
... values fixed the background is fixed relative to the viewport.

clip-path - CSS: Cascading Style Sheets
view-box uses the nearest svg viewport as the reference box.
... if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the size of the reference box is set to the width and height values of the viewbox attribute.

mask-clip - CSS: Cascading Style Sheets
view-box uses the nearest svg viewport as reference box.
... if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the width and height values of the viewbox attribute.

mask-origin - CSS: Cascading Style Sheets
view-box uses the nearest svg viewport as reference box.
... if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the width and height values of the viewbox attribute.

Guide to scroll anchoring - CSS: Cascading Style Sheets
scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport.
... this means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document.

scroll-behavior - CSS: Cascading Style Sheets
when this property is specified on the root element, it applies to the viewport instead.
... this property specified on the body element will not propagate to the viewport.

scroll-snap-destination - CSS: Cascading Style Sheets
the scroll-snap-destination css property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with.
... /* <position> value */ scroll-snap-destination: 400px 600px; /* global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport.

text-size-adjust - CSS: Cascading Style Sheets
instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels.
... to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

transform-box - CSS: Cascading Style Sheets
view-box the nearest svg viewport is used as the reference box.
... if a viewbox attribute is specified for the svg viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute, and the dimension of the reference box is set to the width and height values of the viewbox attribute.

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
... lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.

<style>: The Style Information element - HTML: Hypertext Markup Language
in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
...kground-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

Progressive web app structure - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag, css media queries, flexbox, and css grid.
...e content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com...

Structural overview of progressive web apps - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag, css media queries, flexbox, and css grid.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com...

overflow - SVG: Scalable Vector Graphics
if the overflow property has the value hidden or scroll, a clip of the exact size of the svg viewport is applied.
... when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped.

x - SVG: Scalable Vector Graphics
value <length> | <percentage> default value -10% animatable yes foreignobject for <foreignobject>, x defines the x coordinate of the uper left corner of its viewport.
... svg for <svg>, x defines the x coordinate of the uper left corner of its viewport.

y - SVG: Scalable Vector Graphics
value <length> | <percentage> default value -10% animatable yes foreignobject for <foreignobject>, y defines the y coordinate of the uper left corner of its viewport.
... svg for <svg>, y defines the y coordinate of the uper left corner of its viewport.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) d...
...features attribute removed implementation status unknown svgsvgelement.currentview and svgsvgelement.usecurrentview removed svgsvgelement.currentview was never implemented, svgsvgelement.usecurrentview not removed yet (bug 1174097) svgunknownelement not implemented (bug 1239218) lang attribute without namespace implemented (bug 721920) svgsvgelement.viewport removed never implemented xml:base attribute removed implementation status unknown reorder descendent elements of <switch> having systemlanguage attribute according to allowreorder smil attribute implementation status unknown made <tspan> and <textpath> graphics elements implementation status unknown allow x, y, width, and height on <symbol> impl...

ui/frame - Archive of obsolete content
this will send the message to message is all viewport documents (one per browser window) of the frame: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ name: "my-toolbar", title: "my toolbar", items: [frame] }); frame.postmessage("ping", frame.url); frame scripts can receive these messages using window.addeventlistener(): functi...

Notes on HTML Reflow - Archive of obsolete content
currently, this is only used by the viewport frame to schedule a reflow to reflow all of the viewport's fixed-position frames.

New Skin Notes - Archive of obsolete content
--beltzner any chance we can mobe the "main page" scrollbar to the actual "content area" of the page, so that the sidebar `stays` when in-use, and on dynamic pages (such as the preferences page) if you toggle between something that needs a verticle scrollbar and something that doesnt, you get screen-jitter; if this is not-feasable, perhaps some method to have a viewport scrollbar always appear for the vert direction.

Table Layout Regression Tests - Archive of obsolete content
a typical beginning of a dump (*.rgd file) looks like: <frame va="15022440" type="viewport(-1)" state="270340" parent="0"> <view va="47171904"> </view> <stylecontext va="15022232"> <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null...

openPopup - Archive of obsolete content
an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node.

menupopup - Archive of obsolete content
an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node.

panel - Archive of obsolete content
an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node.

tooltip - Archive of obsolete content
an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node.

background-size - Archive of obsolete content
since you have a 8px default margin on <body> and your <body>'s content is smaller than the viewport's height, you see what you see.

Explaining basic 3D theory - Game development
the last step is viewport transformation, which involves outputting everything for the next step in the rendering pipeline.

Building up a basic demo with Babylon.js - Game development
js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space.

Building up a basic demo with the PlayCanvas engine - Game development
></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.

Building up a basic demo with Three.js - Game development
</head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space.

GLSL Shaders - Game development
ader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element that three.js will insert on the page to be the full size of the viewport.

Mouse controls - Game development
add the following function to your code, below the previous line you added: function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { paddlex = relativex - paddlewidth/2; } } in this function we first work out a relativex value, which is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively this is equal to the distance between the canvas left edge and the mouse pointer.

Scrollport - MDN Web Docs Glossary: Definitions of Web-related terms
the scrollport is the visual viewport of a scroll container in a document.

Speed index - MDN Web Docs Glossary: Definitions of Web-related terms
expressed in milliseconds, and dependent on the size of the viewport, the lower the score, the better.

Backgrounds and borders - Learn web development
fixed: it causes an element's background to be fixed to the viewport so that it doesn't scroll when the page or element content is scrolled.

Test Your Skills: Fundamental layout comprehension - Learn web development
the navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.

Normal Flow - Learn web development
the normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport.

Learn to style HTML using CSS - Learn web development
now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.

What are browser developer tools? - Learn web development
it also allows you to instantly modify the html and css and see the results of your changes reflected live in the browser viewport.

Add a hitmap on top of an image - Learn web development
hotspots must be large enough to tap comfortably, at any viewport size.

Tips for authoring fast-loading HTML pages - Learn web development
switching to lazy loading of images tells the browser to hold off on loading images until they're about to be needed to draw the visual viewport.

Perceived performance - Learn web development
largest contentful paint (lcp) metric, definited in the largest contentful paint api, reports the render time of the largest content element visible in the viewport.

Getting started with Svelte - Learn web development
finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "s...

Introduction to automated testing - Learn web development
other basic features if you go back to the main browserstack page, you'll find a couple of other useful basic features under the more menu option: responsive: enter a url and press generate, and browserstack will load that url on multiple devices with different viewport sizes.

Handling common HTML and CSS problems - Learn web development
a desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries, and make sure it is applied correctly using viewport.

Accessibility API cross-reference
n/a n/a widget (abstract role) a window window window window window (abstract role) i have no idea what the difference between these things are n/a internal_frame, option_pane, frame, directory_pane, root_pane, layered_pane, scroll_pane, viewport desktop_frame, directory_pane, frame, layered_pane, option_pane, root_pane, scroll_pane, viewport a window in an mdi applicaton internal_frame internal_frame, n/a invisible layer z-indexed to the front, for temporary content.

mozbrowserscrollviewchange
details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped.

source-editor.jsm
aalign optional how to position the line with respect to the viewport when scrolling the line into view.

Step through code - Firefox Developer Tools
the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.

Set event listener breakpoints - Firefox Developer Tools
in addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line of code or resume execution.

Measure a portion of the page - Firefox Developer Tools
now when you mouse over the viewport, you'll see the mouse has a crosshair cursor with its current coordinates displayed beside it.

Rulers - Firefox Developer Tools
the dimensions of the viewport are displayed near the top-right corner of the viewport.

Tips - Firefox Developer Tools
viewport: click the screenshot button () in responsive design mode.

CSSRule - Web APIs
e used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.

CSS Object Model (CSSOM) - Web APIs
animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, a...

CanvasRenderingContext2D - Web APIs
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

DOMRect - Web APIs
for example, vreyeparameters.renderrect from the defunct webvr api specified the viewport of a canvas into which visuals for one eye of a head mounted display should be rendered.

DataTransfer.setDragImage() - Web APIs
demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.

Document: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.

DocumentOrShadowRoot.elementsFromPoint() - Web APIs
the elementsfrompoint() method of the documentorshadowroot interface returns an array of all elements at the specified coordinates (relative to the viewport).

DocumentOrShadowRoot.nodeFromPoint() - Web APIs
the nodefrompoint() property of the documentorshadowroot interface returns the topmost node at the specified coordinates (relative to the viewport).

DocumentOrShadowRoot.nodesFromPoint() - Web APIs
the nodesfrompoint() property of the documentorshadowroot interface returns an array of all nodes at the specified coordinates (relative to the viewport).

Element.clientHeight - Web APIs
when clientheight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.

Element.clientWidth - Web APIs
when clientwidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.

Element.scrollHeight - Web APIs
the scrollheight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar.

Element.scrollWidth - Web APIs
the scrollwidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar.

Element - Web APIs
element.getboundingclientrect() returns the size of an element and its position relative to the viewport.

HTMLElement: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.

HTMLImageElement.currentSrc - Web APIs
the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document.

HTMLImageElement.sizes - Web APIs
it may be specified using font-relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width).

HTMLImageElement - Web APIs
this string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used.

IntersectionObserver.observe() - Web APIs
this element must be a descendant of the root element (or contained wtihin the current document, if the root is the document's viewport).

IntersectionObserverEntry.rootBounds - Web APIs
for roots which are the document's viewport, this rectangle is the bounds rectangle of the entire document.

LayoutShift - Web APIs
properties layoutshift.value returns the impact fraction (fraction of the viewport that was shifted) times the distance fraction (distance moved as a fraction of viewport).

MediaQueryList.addListener() - Web APIs
examples var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications ...

MediaQueryList.matches - Web APIs
examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { ...

MediaQueryList.onchange - Web APIs
}; example var mql = window.matchmedia('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'onchange' in that specifica...

MediaQueryList.removeListener() - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, wh...

MediaQueryListEvent.matches - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications...

MediaQueryListEvent.media - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification s...

MediaQueryListEvent - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications ...

Using the MediaStream Recording API - Web APIs
keeping the interface constrained to the viewport, regardless of device height, with calc() the calc() function is one of those useful little utility features that's cropped up in css that doesn't look like much initially, but soon starts to make you think "wow, why didn't we have this before?

MouseEvent.pageX - Web APIs
syntax var pagex = mouseevent.pagex; value a floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.

Notification.onclick - Web APIs
}; the default behavior is to move the focus to the viewport of the notification's related browsing context.

Notifications API - Web APIs
these are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app.

Pointer Lock API - Web APIs
the pointer lock api (formerly called mouse lock api) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport.

Range.getBoundingClientRect() - Web APIs
this method is useful for determining the viewport coordinates of the cursor or selection inside a text box.

ResizeObserver - Web APIs
this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport.

SVGCircleElement - Web APIs
10 : -10; // clamp the circle radius to a minimum of 10 and a maximum of 250, // so it won't disappear or get bigger than the viewport var newvalue = math.min(math.max(circle.r.baseval.value + change, 10), 250); circle.setattribute("r", newvalue); } click on the circle.

SVGElement - Web APIs
svgelement.viewportelementread only the svgelement, which established the current viewport.

getBBox() - Web APIs
getbbox returns different values than getboundingclientrect(), as the latter returns value relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box.

The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).

Using Touch Events - Web APIs
a touch point's properties include a unique identifier, the touch point's target element as well as the x and y coordinates of the touch point's position relative to the viewport, page, and screen.

Basic scissoring - Web APIs
" + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); // enable scissoring operation and define the position and // size of the scissoring area.

Boilerplate 1 - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } the source code of this example is also available on github.

Canvas size and WebGL - Web APIs
" + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.

Color masking - Web APIs
ion (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlis...

Hello GLSL - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.

Hello vertex attributes - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.

Raining rectangles - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.

Scissor animation - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.

Simple color animation - Web APIs
ck"}); var gl; function drawanimation () { if (!gl) { var canvas = document.getelementbyid("canvas-view"); gl = canvas.getcontext("webgl") ||canvas.getcontext("experimental-webgl"); if (!gl) { clearinterval(timer); alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.

Textures from code - Web APIs
= document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.

WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 64 aliased_point_size_range: [1,100] your desktop may support 16k textures, or maybe 16 texture units in the vertex shader, but most other sys...

Geometry and reference spaces in WebXR - Web APIs
the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered.

Window.matchMedia() - Web APIs
examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.

Window.mozInnerScreenX - Web APIs
summary gets the x coordinate of the top-left corner of the window's viewport, in screen coordinates.

Window.mozInnerScreenY - Web APIs
summary gets the y coordinate of the top-left corner of the window's viewport, in screen coordinates.

Window.open() - Web APIs
tip: for accessibility reasons, it is strongly recommended to set this feature always on scrollbars if this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.

Window.orientation - Web APIs
summary returns the orientation in degrees (in 90-degree increments) of the viewport relative to the device's natural orientation.

XRRigidTransform.inverse - Web APIs
let modelviewmatrix = mat4.create(); for (let view of pose.view) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* ...

XRSession.requestAnimationFrame() - Web APIs
// obtain xr object const xr = navigator.xr // request a new xrsession xr.requestsession("inline").then((xrsession) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace) gl.bindframebuffer(xrwebgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height) // webgl draw calls will now be rendered into the appropriate viewport.

XRSession - Web APIs
const xr = navigator.xr; if (xr) { xr.requestsession("inline").then((xrsession) => { xrsession.requestreferencespace("local").then((xrreferencespace) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); } }); }); }); } else { /* webxr is not available */ } specifications specification status comment webxr device apithe definition of 'xrsession' in that specification.

XRView.eye - Web APIs
uffer); gl.clearcolor(0,0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of xrpose.views) { let skipview = false; if (view.eye == "left" && body.lefteye.injured) || skipview = updateinjury(body.lefteye); } else if (view.eye == "right" && body.righteye.injured) { skipview = updateinjury(body.righteye); } if (!skipview) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); renderscene(gl, view); } } for each of the views, the value of eye is checked and if it's either left or right, we check to see if the body.lefteye.injured or body.righteye.injured property is true; if so, we call a function updateinjury() on that eye to do things such as allow a bit of ...

XRViewerPose.views - Web APIs
let pose = frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.

@page - CSS: Cascading Style Sheets
note: the w3c is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax.

At-rules - CSS: Cascading Style Sheets
@viewport — describes the aspects of the viewport for small screen devices.

Coordinate systems - CSS: Cascading Style Sheets
client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred.

CSSOM View - CSS: Cascading Style Sheets
reference properties scroll-behavior guides coordinate systems a guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing.

Handling Overflow in Multicol - CSS: Cascading Style Sheets
using vertical media queries one issue with multicol on the web is that, if your columns are taller than the viewport, the reader will need to scroll up and down to read, which is not good user experience.

In Flow and Out of Flow - CSS: Cascading Style Sheets
using position: fixed also removes the item from flow, however the offsets are based on the viewport rather than the containing block.

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
if you have ever centered your layout in the viewport, by setting the right and left margin of the container block to auto, you know that an auto margin absorbs all of the available space.

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
rather than checking a viewport width, or some feature of the browser or device, we check for support of a css property and value pair using an @supports rule.

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
in our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

The stacking context - CSS: Cascading Style Sheets
the stacking context is a three-dimensional conceptualization of html elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.

CSS Layout cookbook - CSS: Cascading Style Sheets
flexbox, box alignment sticky footers creating a footer which sits at the bottom of the container or viewport when the content is shorter.

Mozilla CSS extensions - CSS: Cascading Style Sheets
::-moz-table-row-group :-moz-tree-cell :-moz-tree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-window...

animation-delay - CSS: Cascading Style Sheets
3 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes before firefox 57, firefox does not repaint elements outside the viewport that are animated into the viewport with a delay.

background-size - CSS: Cascading Style Sheets
however, if the background's background-attachment value is fixed, the positioning area is instead the entire viewport.

clamp() - CSS: Cascading Style Sheets
note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.

max() - CSS: Cascading Style Sheets
in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px).

min() - CSS: Cascading Style Sheets
in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px).

overscroll-behavior-block - CSS: Cascading Style Sheets
the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large height so it will also scroll vertically.

overscroll-behavior-inline - CSS: Cascading Style Sheets
the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large width so it will also scroll horizontally.

overscroll-behavior-x - CSS: Cascading Style Sheets
the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large width so it will scroll horizontally.

scroll-snap-stop - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always; /* global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; syntax values normal when the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.

scrollbar-color - CSS: Cascading Style Sheets
note: user agents must apply any scrollbar-color value set on the root element to the viewport.

scrollbar-width - CSS: Cascading Style Sheets
note: user agents must apply any scrollbar-width value set on the root element to the viewport.

translateZ() - CSS: Cascading Style Sheets
note if the perspective() value is less than the translatez() value, such as transform: perspective(200px) translatez(300px); the transformed element will not be visible as it is further than the user's viewport.

CSS: Cascading Style Sheets
now it's time to look at how to place your boxes in the right place concerning the viewport, and one another.

Guide to Web APIs - Developer guides
ion apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...

Mobile Web Development - Developer guides
it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

<video>: The Video Embed element - HTML: Hypertext Markup Language
styling with css the <video> element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded.

Preloading content with rel="preload" - HTML: Hypertext Markup Language
matchmedia("(max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport.

Cross-Origin Resource Sharing (CORS) - HTTP
xample, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property.

Content negotiation - HTTP
viewport-width indicates the layout viewport width in css pixels.

Feature Policy - HTTP
ensure images are sized properly and are not too big for the viewport.

Accept-CH-Lifetime - HTTP
syntax accept-ch-lifetime: <age> examples accept-ch: viewport-width, dpr accept-ch-lifetime: 86400 ...

Accept-CH - HTTP
syntax accept-ch: <list of client hints> examples accept-ch: dpr, viewport-width accept-ch: width accept-ch-lifetime: 86400 vary: dpr, viewport-width, width note: remember to vary the response based on the accepted client hints.

Feature-Policy - HTTP
execution-while-out-of-viewport controls whether tasks should execute in frames while they're outside of the visible viewport.

Web Performance
lazy-loading javascript with dynamic imports when developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport.

Introduction to progressive web apps - Progressive web apps (PWAs)
responsiveness responsive web apps use technologies like media queries and viewport to make sure that their uis will fit any form factor: desktop, mobile, tablet, or whatever comes next.

Graphic design for responsive sites - Progressive web apps (PWAs)
css media queries allow us to serve different css rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible.

class - SVG: Scalable Vector Graphics
example <html> <body> <svg width="120" height="220" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc...

clip-path - SVG: Scalable Vector Graphics
value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.

gradientUnits - SVG: Scalable Vector Graphics
percentages represent values relative to the current svg viewport.

height - SVG: Scalable Vector Graphics
svg for <svg>, height defines the vertical length for the rendering area of the svg viewport.

markerHeight - SVG: Scalable Vector Graphics
the markerheight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes.

markerWidth - SVG: Scalable Vector Graphics
the markerwidth attribute represents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes.

refX - SVG: Scalable Vector Graphics
if the attribute is not specified, no horizontal adjustment is made, and the left side of the symbol’s rectangular viewport region (regardless of the viewbox coordinate) is positioned at the x coordinate.

refY - SVG: Scalable Vector Graphics
if the attribute is not specified, no vertical adjustment is made, and the top side of the symbol’s rectangular viewport region (regardless of the viewbox coordinate) is positioned at the y coordinate.

stroke-dashoffset - SVG: Scalable Vector Graphics
set of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

width - SVG: Scalable Vector Graphics
svg for <svg>, width defines the horizontal length for the rendering area of the svg viewport.

Content type - SVG: Scalable Vector Graphics
two common cases are: when a percentage length value represents a percentage of the viewport width or height when a percentage length value represents a percentage of the bounding box width or height on a given object.

<clipPath> - SVG: Scalable Vector Graphics
*/ @keyframes openyourheart {from {r: 0} to {r: 60px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element.

<pattern> - SVG: Scalable Vector Graphics
; default value: xmidymid meet; animatable: yes viewbox this attribute defines the bound of the svg viewport for the pattern fragment.

<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>|top|center|bottom ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current symbol.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist, checkintersection, checkenclosure g implemented.

SVG In HTML Introduction - SVG: Scalable Vector Graphics
in this case our picture is laid out in a 100 by 100 viewport.

Texts - SVG: Scalable Vector Graphics
basics we have seen in the introducing example, that the text element can be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear.

Tutorials
now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.