├── .github
    └── FUNDING.yml
├── .gitignore
├── README.md
├── dist
    └── .gitkeep
├── index.html
├── package-lock.json
├── package.json
├── src
    └── index.js
└── test
    └── index.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: joppuyo
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | !/dist/.gitkeep
3 | /node_modules
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Large, small, and dynamic viewport units polyfill
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/large-small-dynamic-viewport-units-polyfill)](https://www.npmjs.com/package/large-small-dynamic-viewport-units-polyfill)
 4 | 
 5 | This is a "polyfill" which adds support for svh, dvh and lvh viewport units. It's mainly useful when dealing with iOS and Android mobile devices.
 6 | 
 7 | ⚠️ **This library is pre-release quality. It should work but it requires more comprehensive testing on different devices. Please test it out and report any bugs you might encounter.**
 8 | 
 9 | ## How it works
10 | 
11 | It adds CSS custom properties (variables) `--1svh`, `--1dvh` and `--1lvh` using JavaScript. These correspond to 1 svh, 1 dvh and 1 lvh unit respectively. These custom properties are automatically updated when the viewport size changes. You can use CSS `calc()` function to multiply them to your desired size.
12 | 
13 | ## How to use
14 | 
15 | ### 1. Import script
16 | 
17 | Include script tag or import the script using a bundler.
18 | 
19 | #### 1.A. Script tag
20 | 
21 | ```html
22 | <script src="https://unpkg.com/large-small-dynamic-viewport-units-polyfill@0.1.1/dist/large-small-dynamic-viewport-units-polyfill.min.js"></script>
23 | ```
24 | 
25 | #### 1.B. Bundler
26 | 
27 | Install the package.
28 | 
29 | ```shell
30 | npm install large-small-dynamic-viewport-units-polyfill
31 | ```
32 | 
33 | Import the package.
34 | 
35 | ```js
36 | import 'large-small-dynamic-viewport-units-polyfill';
37 | ```
38 | 
39 | ### 2. Write CSS
40 | 
41 | Add CSS like this in your project:
42 | 
43 | ```css
44 | .my-small-hero-element {
45 |     width: 100%;
46 |     height: 100vh; /* For browsers that don't support CSS variables */
47 |     height: calc(var(--1svh, 1vh) * 100); /* This is the "polyfill" */
48 |     height: 100svh; /* This is for future browsers that support svh, dvh and lvh viewport units */
49 | }
50 | 
51 | .my-dynamic-hero-element {
52 |     width: 100%;
53 |     height: 100vh; /* For browsers that don't support CSS variables */
54 |     height: calc(var(--1dvh, 1vh) * 100); /* This is the "polyfill" */
55 |     height: 100dvh; /* This is for future browsers that support svh, dvh and lvh viewport units */
56 | }
57 | 
58 | .my-large-hero-element {
59 |     width: 100%;
60 |     height: 100vh; /* For browsers that don't support CSS variables */
61 |     height: calc(var(--1lvh, 1vh) * 100); /* This is the "polyfill" */
62 |     height: 100lvh; /* This is for future browsers that support svh, dvh and lvh viewport units */
63 | }
64 | ```
65 | 
66 | ⚠️ **You should include all three lines so your styles will work properly. Because browsers will simply ignore CSS properties with values they do not understand, new browsers that implement the units will use the last line.**
67 | 
68 | You may omit the first line if you don't need to support very old browsers like IE 11 (As of 2023, CSS custom properties are supported by 97% of browsers).
69 | 
70 | ℹ️ **lvh unit is only included for the sake of completeness. It currently behaves exactly like vh unit. This may break in a future version of iOS or Android.**
71 | 
72 | ## Compatibility
73 | 
74 | I've tested this library with the following operating systems and devices: 
75 | 
76 | * Mobile Safari, iOS 15, iPhone 12 Pro
77 | * Mobile Safari, iOS 15, iPad Pro 11" 2018
78 | * Mobile Safari, iOS 14, iPhone SE (1st generation)
79 | * Mobile Safari, iOS 15.2, iPhone 13 Pro (Simulator)
80 | * Mobile Safari, iOS 15.2, iPad Pro (11-inch, 3rd Generation, Simulator)
81 | * Mobile Safari, iOS 16.1, iPhone 14 Pro (Simulator)
82 | * Mobile Safari, iOS 16.1, iPad Pro (11-inch, 4th Generation, Simulator)
83 | * Google Chrome 97, iOS 15, iPhone 12 Pro
84 | * Google Chrome 97, iPadOS 15, iPad Pro 11" 2018
85 | * Google Chrome 97, Android 8.1, Nexus 5X
86 | * Google Chrome 108, Android Emulator
87 | 
88 | ## Todo
89 | 
90 | * Add some automated tests
91 | * Figure out how to run automated tests on mobile devices (preferably on the cheap)
92 | 
93 | ## Further reading
94 | 
95 | * [The Large, Small, and Dynamic Viewports – Bram.us](https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/)
96 | * [The trick to viewport units on mobile – CSS-Tricks](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/)
97 | * [New Viewport Units Introduced to Values and Units L4 – CSS WG Blog](https://www.w3.org/blog/CSS/2021/07/15/css-values-4-viewport-units/)
98 | 


--------------------------------------------------------------------------------
/dist/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joppuyo/large-small-dynamic-viewport-units-polyfill/408e2deb3c0e7805d152aed0c463e4e3a3d9bab1/dist/.gitkeep


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 | 
  7 |     <script src="./src/index.js"></script>
  8 | 
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 10 | 
 11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
 12 | 
 13 |     <style>
 14 |         html, body {
 15 |             height: 2000px;
 16 |         }
 17 | 
 18 |         .box {
 19 |             background-color: lightgray;
 20 |             position: fixed;
 21 |             top: 10px;
 22 |             left: 10px;
 23 |         }
 24 | 
 25 |         .wrapper {
 26 |             display: flex;
 27 |         }
 28 | 
 29 |         .absolute {
 30 |             position: absolute;
 31 |             height: 100%;
 32 |             width: 40px;
 33 |             background-color: orange;
 34 |             right: 0;
 35 |             top: 0;
 36 |             bottom: 0;
 37 |         }
 38 | 
 39 |         .fixed {
 40 |             position: fixed;
 41 |             height: 100%;
 42 |             width: 80px;
 43 |             background-color: pink;
 44 |             right: 0;
 45 |             top: 0;
 46 |             bottom: 0;
 47 |         }
 48 | 
 49 |         .svh {
 50 |             width: 40px;
 51 |             height: 100vh;
 52 |             height: calc(var(--1svh, 1vh) * 100);
 53 |             height: 100svh;
 54 |             background-color: red;
 55 |         }
 56 |         .cvh {
 57 |             width: 40px;
 58 |             height: 100vh;
 59 |             height: calc(var(--1cvh, 1vh) * 100);
 60 |             height: 100cvh;
 61 |             background-color: blue;
 62 |         }
 63 |         .dvh {
 64 |             width: 40px;
 65 |             height: 100vh;
 66 |             height: calc(var(--1dvh, 1vh) * 100);
 67 |             height: 100dvh;
 68 |             background-color: green;
 69 |         }
 70 | 
 71 |     </style>
 72 | 
 73 |     <script>
 74 | 
 75 |         window.addEventListener('DOMContentLoaded', function () {
 76 |             var calculate = function() {
 77 |                 var innerheight = window.innerHeight;
 78 |                 var clientheight = document.documentElement.clientHeight;
 79 |                 document.getElementById('innerheight').innerText = innerheight;
 80 |                 document.getElementById('clientheight').innerText = clientheight;
 81 | 
 82 |                 var element = document.createElement("div");
 83 |                 element.style.width = '1px';
 84 |                 element.style.height = '100vh';
 85 |                 element.style.visibility = 'hidden';
 86 | 
 87 |                 var body = document.querySelector("body");
 88 |                 body.appendChild(element);
 89 | 
 90 |                 vhheight = element.clientHeight;
 91 | 
 92 |                 document.getElementById('hundredvh').innerText = vhheight;
 93 | 
 94 |                 element.remove();
 95 | 
 96 |                 var absolute = document.createElement("div");
 97 |                 absolute.style.width = '1px';
 98 |                 absolute.style.height = '100%';
 99 |                 absolute.style.position = 'absolute'
100 |                 absolute.style.left = '0';
101 |                 absolute.style.top = '0';
102 |                 absolute.style.bottom = '0';
103 |                 absolute.style.visibility = 'hidden';
104 | 
105 |                 body.appendChild(absolute);
106 | 
107 |                 var absoluteHeight = absolute.clientHeight;
108 | 
109 |                 document.getElementById('absoluteheight').innerText = absoluteHeight;
110 | 
111 |                 absolute.remove();
112 | 
113 |                 var fixed = document.createElement("div");
114 |                 fixed.style.width = '1px';
115 |                 fixed.style.height = '100%';
116 |                 fixed.style.position = 'fixed'
117 |                 fixed.style.left = '0';
118 |                 fixed.style.top = '0';
119 |                 fixed.style.bottom = '0';
120 |                 fixed.style.visibility = 'hidden';
121 | 
122 |                 body.appendChild(fixed);
123 | 
124 |                 var fixedHeight = fixed.clientHeight;
125 | 
126 |                 document.getElementById('fixedheight').innerText = fixedHeight;
127 | 
128 |                 fixed.remove();
129 | 
130 | 
131 | 
132 |             }
133 | 
134 |             calculate();
135 | 
136 |             setInterval(function () {
137 |                 calculate();
138 |             }, 1000)
139 |         })
140 | 
141 |     </script>
142 | 
143 | </head>
144 | 
145 | 
146 | <body>
147 | 
148 | <div class="box">
149 |     <div>window.innerHeight: <span id="innerheight"></span></div>
150 |     <div>document.documentElement.clientHeight: <span id="clientheight"></span></div>
151 |     <div>100vh: <span id="hundredvh"></span></div>
152 |     <div>absolute: <span id="absoluteheight"></span></div>
153 |     <div>fixed: <span id="fixedheight"></span></div>
154 | </div>
155 | 
156 | <div class="wrapper">
157 |     <div class="svh"></div>
158 |     <div class="cvh"></div>
159 |     <div class="dvh"></div>
160 | </div>
161 | 
162 | 
163 | <div class="fixed"></div>
164 | <div class="absolute"></div>
165 | 
166 | </body>
167 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "large-small-dynamic-viewport-units-polyfill",
 3 |   "version": "0.1.1",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "uglify-js": {
 8 |       "version": "3.14.5",
 9 |       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
10 |       "integrity": "sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==",
11 |       "dev": true
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "large-small-dynamic-viewport-units-polyfill",
 3 |   "version": "0.1.1",
 4 |   "description": "Polyfill for svh, dvh and lvh CSS viewport units",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "prepublishOnly": "uglifyjs ./src/index.js -o ./dist/large-small-dynamic-viewport-units-polyfill.min.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill.git"
13 |   },
14 |   "keywords": [
15 |     "mobile",
16 |     "safari",
17 |     "android",
18 |     "chrome",
19 |     "viewport",
20 |     "units",
21 |     "vh",
22 |     "100vh"
23 |   ],
24 |   "author": "Johannes Siipola",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill/issues"
28 |   },
29 |   "homepage": "https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill#readme",
30 |   "dependencies": {},
31 |   "devDependencies": {
32 |     "uglify-js": "^3.14.5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | var setVh = function () {
 2 |     var svh = document.documentElement.clientHeight * 0.01;
 3 |     document.documentElement.style.setProperty('--1svh', (svh + "px"));
 4 |     var dvh = window.innerHeight * 0.01;
 5 |     document.documentElement.style.setProperty('--1dvh', (dvh + "px"));
 6 | 
 7 |     if (document.body) {
 8 |         var fixed = document.createElement("div");
 9 |         fixed.style.width = '1px';
10 |         fixed.style.height = '100vh';
11 |         fixed.style.position = 'fixed'
12 |         fixed.style.left = '0';
13 |         fixed.style.top = '0';
14 |         fixed.style.bottom = '0';
15 |         fixed.style.visibility = 'hidden';
16 | 
17 |         document.body.appendChild(fixed);
18 | 
19 |         var fixedHeight = fixed.clientHeight;
20 | 
21 |         fixed.remove();
22 | 
23 |         var lvh = fixedHeight * 0.01;
24 | 
25 |         document.documentElement.style.setProperty('--1lvh', (lvh + "px"));
26 |     }
27 | };
28 | 
29 | var isMobile = function() {
30 |     if(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2)) {
31 |         return true;
32 |     }
33 |     return false;
34 | }
35 | 
36 | var initialize = function () {
37 |     // SSR support
38 |     if (typeof window === 'undefined') {
39 |         return;
40 |     }
41 | 
42 |     // Don't run polyfill if browser supports the units natively
43 |     if ('CSS' in window &&
44 |         'supports' in window.CSS &&
45 |         window.CSS.supports('height: 100svh') &&
46 |         window.CSS.supports('height: 100dvh') &&
47 |         window.CSS.supports('height: 100lvh')
48 |     ) {
49 |         return;
50 |     }
51 | 
52 |     // Don't run on desktop browsers
53 |     if (!isMobile) {
54 |         return;
55 |     }
56 | 
57 |     // We run the calculation as soon as possible (eg. the script is in document head)
58 |     setVh();
59 | 
60 |     // We run the calculation again when DOM has loaded
61 |     document.addEventListener('DOMContentLoaded', function () {
62 |         setVh();
63 |     })
64 | 
65 |     // We run the calculation when window is resized
66 |     window.addEventListener('resize', function () {
67 |         setVh();
68 |     });
69 | }
70 | 
71 | initialize();
72 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 | 
 7 |     <script src="../src/index.js"></script>
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
10 | 
11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
12 | 
13 |     <style>
14 |         html, body {
15 |             height: 2000px;
16 |             font-family: sans-serif;
17 |             font-size: 12px;
18 |         }
19 | 
20 |         .box {
21 |             display: flex;
22 |         }
23 | 
24 |         .hundredvh {
25 |             width: 75px;
26 |             height: 100vh;
27 |             background-color: #0097A7;
28 |             border-radius: 5px;
29 |             color: white;
30 |             padding: 5px;
31 |             border: 2px solid white;
32 |             font-weight: bold;
33 |         }
34 | 
35 |         .svh {
36 |             width: 75px;
37 |             height: 100vh;
38 |             height: calc(var(--1svh, 1vh) * 100);
39 |             height: 100svh;
40 |             background-color: #7B1FA2;
41 |             border-radius: 5px;
42 |             color: white;
43 |             padding: 5px;
44 |             border: 2px solid white;
45 |             font-weight: bold;
46 |         }
47 |         .dvh {
48 |             width: 75px;
49 |             height: 100vh;
50 |             height: calc(var(--1dvh, 1vh) * 100);
51 |             height: 100dvh;
52 |             background-color: #FBC02D;
53 |             border-radius: 5px;
54 |             color: black;
55 |             padding: 5px;
56 |             border: 2px solid white;
57 |             font-weight: bold;
58 |         }
59 |         .lvh {
60 |             width: 75px;
61 |             height: 100vh;
62 |             height: calc(var(--1lvh, 1vh) * 100);
63 |             height: 100lvh;
64 |             background-color: black;
65 |             border-radius: 5px;
66 |             color: white;
67 |             padding: 5px;
68 |             border: 2px solid white;
69 |             font-weight: bold;
70 |         }
71 | 
72 | 
73 |     </style>
74 | 
75 | </head>
76 | 
77 | 
78 | <body>
79 | 
80 | <div class="box">
81 |     <div class="hundredvh">100vh reference</div>
82 |     <div class="svh">Small viewport.<br><br>When scrolled down, the height of this box shouldn't change</div>
83 |     <div class="dvh">Dynamic viewport.<br><br>When scrolled down, this box should become taller</div>
84 |     <div class="lvh">Large viewport.<br><br>When scrolled down, the height of this box shouldn't change</div>
85 | </div>
86 | 
87 | </body>
88 | </html>


--------------------------------------------------------------------------------