dvh/svh/lvh Viewport Variants Lookup
Explicit independently observed small/large/dynamic viewport sizes, units are percentages of corresponding heights; no inferred browser chrome or vh alias. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Small, large and dynamic viewport heights describe different viewport-size bases.
Small, large and dynamic viewport heights describe different viewport-size bases.1
Percentage units resolve against the selected basis rather than one permanent screen height. Use dvh/svh/lvh Viewport Variants Lookup to evaluate the supplied inputs under the specific model below.
When to use dvh/svh/lvh Viewport Variants Lookup
Use dvh/svh/lvh Viewport Variants Lookup to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use dvh/svh/lvh Viewport Variants Lookup and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Small viewport height px, Large viewport height px, Dynamic viewport height px, Observed percent using the field table and validation rules below, then run the tool.
- Read Svh length px, Lvh length px, Dvh length px and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| smallViewportHeightPx | Small viewport height px | number | Required; constraints below |
| largeViewportHeightPx | Large viewport height px | number | Required; constraints below |
| dynamicViewportHeightPx | Dynamic viewport height px | number | Required; constraints below |
| observedPercent | Observed percent | number | Required; constraints below |
Enter nonnegative small, dynamic and large viewport heights in px ordered small≤dynamic≤large, plus a nonnegative percentage. Return each height times percentage/100. Percentages above 100 are accepted; the calculation does not observe browser chrome or enforce live viewport updates.
svhPx = small×percent/100; dvhPx = dynamic×percent/100; lvhPx = large×percent/100 Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| svhLengthPx | Svh length px | number |
| lvhLengthPx | Lvh length px | number |
| dvhLengthPx | Dvh length px | number |
{
"input": {
"smallViewportHeightPx": 600,
"largeViewportHeightPx": 800,
"dynamicViewportHeightPx": 700,
"observedPercent": 50
},
"output": {
"svhLengthPx": 300,
"lvhLengthPx": 400,
"dvhLengthPx": 350
}
}Limitations and assumptions
Percentage units resolve against the selected basis rather than one permanent screen height. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use content-visibility:auto Render Skip Note for a related task: Content visibility can allow a browser to skip eligible rendering work.
Use Container Query Units cqi/cqw Reference for a related task: Container width and inline size can differ under vertical writing.
References
-
dvh/svh/lvh Viewport Variants Lookup — tool.io
Similar or alternative tools
- content-visibility:auto Render Skip Note
Content visibility can allow a browser to skip eligible rendering work.
- Container Query Units cqi/cqw Reference
Container width and inline size can differ under vertical writing.