{"id":13493827,"url":"https://github.com/Faisal-Manzer/postcss-viewport-height-correction","last_synced_at":"2025-03-28T13:31:06.202Z","repository":{"id":40997287,"uuid":"231810979","full_name":"Faisal-Manzer/postcss-viewport-height-correction","owner":"Faisal-Manzer","description":"PostCSS plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen.","archived":false,"fork":false,"pushed_at":"2023-04-16T21:30:17.000Z","size":337,"stargazers_count":245,"open_issues_count":5,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T12:14:57.871Z","etag":null,"topics":["css3","fullscreen","hacktoberfest","hacktoberfest2021","postcss","postcss-plugin","viewport-dimensions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Faisal-Manzer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-04T18:38:13.000Z","updated_at":"2025-01-23T09:22:37.000Z","dependencies_parsed_at":"2024-01-06T02:04:03.641Z","dependency_job_id":null,"html_url":"https://github.com/Faisal-Manzer/postcss-viewport-height-correction","commit_stats":{"total_commits":19,"total_committers":6,"mean_commits":"3.1666666666666665","dds":"0.26315789473684215","last_synced_commit":"ff1ab0b01f3d0a5b90c8ddae378e6b6f5f7ba784"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faisal-Manzer%2Fpostcss-viewport-height-correction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faisal-Manzer%2Fpostcss-viewport-height-correction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faisal-Manzer%2Fpostcss-viewport-height-correction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faisal-Manzer%2Fpostcss-viewport-height-correction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Faisal-Manzer","download_url":"https://codeload.github.com/Faisal-Manzer/postcss-viewport-height-correction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246037250,"owners_count":20713384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","fullscreen","hacktoberfest","hacktoberfest2021","postcss","postcss-plugin","viewport-dimensions"],"created_at":"2024-07-31T19:01:19.174Z","updated_at":"2025-03-28T13:31:05.889Z","avatar_url":"https://github.com/Faisal-Manzer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Viewport Height Correction\n[PostCSS] plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen.\n\n![](https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1000,f_auto,q_auto/v1532099222/viewport-units-mobile-crop_gxa4yw.jpg)\n\n## Installation\n```shell\nyarn add postcss-viewport-height-correction\n# --- OR ----\nnpm install --save postcss-viewport-height-correction\n```\n\nAnd then add this javascript to `public/index.html` (for React), or add to `template.html` (for Preact).\n```js\nvar customViewportCorrectionVariable = 'vh';\n\n\nfunction setViewportProperty(doc) {\n  var prevClientHeight;\n  var customVar = '--' + ( customViewportCorrectionVariable || 'vh' );\n  function handleResize() {\n    var clientHeight = doc.clientHeight;\n    if (clientHeight === prevClientHeight) return;\n    requestAnimationFrame(function updateViewportHeight(){\n      doc.style.setProperty(customVar, (clientHeight * 0.01) + 'px');\n      prevClientHeight = clientHeight;\n    });\n  }\n  handleResize();\n  return handleResize;\n}\nwindow.addEventListener('resize', setViewportProperty(document.documentElement));\n```\n\n[PostCSS]: https://github.com/postcss/postcss\n\n\nCheck you project for existed PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\n\nIf you already use PostCSS, add the plugin to plugins list:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-viewport-height-correction'),\n    require('autoprefixer')\n  ]\n}\n```\n\nIf you do not use PostCSS, add it according to [official docs]\nand set this plugin in settings.\n\n[official docs]: https://github.com/postcss/postcss#usage\n\n## Configuration\n**You really will rarely need this.** Use this when you have some conflicting css variable.\nWe use `--vh` as variable to fix the viewport height. You can use `--pvh` or any other variable of your choice.\n\nConfigure postcss to use your variable.\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-viewport-height-correction')({ variable: 'pvh' }),\n    require('autoprefixer')\n  ]\n}\n```\n\nAlso change variable name in javascript you added. Change `customViewportCorrectionVariable` value to your variable.\n```diff\n+ var customViewportCorrectionVariable = 'pvh'\n- var customViewportCorrectionVariable = 'vh'\n```\n\n\u003e NOTE: Only use plain alphabetical characters as custom variable name.\n\u003e We are using regex to patch viewport value, any variable with special characters can lead to unknown issues.\n\n## Inspiration\nThe viewport height which we use as \"vh\" unit in css does not give the actual viewport height but gives the height of the browser window. This plugin is an implememtation of [CSS Tricks article]( https://css-tricks.com/the-trick-to-viewport-units-on-mobile/) on this issue.\n\n## Example Output\n```css\n.foo {\n    /* Input example */\n    height: 100vh;\n}\n\n.bar {\n    min-height: 50vh;\n    max-height: 75vh;\n    margin: -1vh;\n}\n```\n\n```css\n.foo {\n  /* Output example */\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100); /* corrected viewport height using css custom variables */\n}\n\n.bar {\n      min-height: calc(var(--vh, 1vh) * 50);\n      max-height: calc(var(--vh, 1vh) * 75);\n      margin: calc(var(--vh, 1vh) * -1);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFaisal-Manzer%2Fpostcss-viewport-height-correction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFaisal-Manzer%2Fpostcss-viewport-height-correction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFaisal-Manzer%2Fpostcss-viewport-height-correction/lists"}