--- title: New Viewport Units | daily.dev description: New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width... canonical: https://daily.dev/posts/new-viewport-units-lkicakzcc twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: New Viewport Units | daily.dev og:description: New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width... og:url: https://daily.dev/posts/new-viewport-units-lkicakzcc og:image: https://api.daily.dev/og/posts/LkicAkzCc.png og:image:alt: New Viewport Units og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # New Viewport Units **[Ahmad Shadeed](https://daily.dev/sources/ishadeed)** · 5 min read · 343 upvotes · 28 comments ## Summary New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width or height. But using the unit on mobile is buggy. The reason is that viewport size won’t include the browser’s address bar UI. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@idoshamun** · 4 upvotes > Finally!! So many hacks and workarounds throughout my career **@heyvaldemar** · 1 upvotes > Hodor! Hodor! **@seam6130** · 0 upvotes > Wow! I just learnt new things about css viewport. **@yaireo** · 0 upvotes > New for you maybe. It has been talked about in about a million repeating blog posts for years. **@mdhassanpatwary** · 0 upvotes > Nice ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#mobile](https://daily.dev/tags/mobile), [#css](https://daily.dev/tags/css), [#android](https://daily.dev/tags/android), [#ios](https://daily.dev/tags/ios), [#google-chrome](https://daily.dev/tags/google-chrome) [View this post on daily.dev](https://daily.dev/posts/new-viewport-units-lkicakzcc) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"New Viewport Units","url":"https://daily.dev/posts/new-viewport-units-lkicakzcc","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/new-viewport-units-lkicakzcc"},"datePublished":"2023-07-10T13:21:08.209Z","dateModified":"2023-07-20T14:10:56.027Z","description":"New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/480022273c67a46380c88d1380d51983?_a=AQADKdt","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/480022273c67a46380c88d1380d51983?_a=AQADKdt","isAccessibleForFree":true,"articleSection":"Ahmad Shadeed","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Ahmad Shadeed","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/2bcc7ec837854040856ba4a4eb8946d0","url":"https://daily.dev/sources/ishadeed"},"commentCount":28,"discussionUrl":"https://daily.dev/posts/new-viewport-units-lkicakzcc","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":343},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":28}],"keywords":"mobile,css,android,ios,google-chrome","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Ahmad Shadeed","item":"https://daily.dev/sources/ishadeed"},{"@type":"ListItem","position":3,"name":"New Viewport Units"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/new-viewport-units-lkicakzcc","comment":[{"@type":"Comment","text":"Finally!! So many hacks and workarounds throughout my career","datePublished":"2023-07-10T19:13:51.758Z","url":"https://daily.dev/posts/LkicAkzCc#c-ftNNIvRd4","author":{"@type":"Person","name":"Ido Shamun","url":"https://daily.dev/idoshamun","image":"https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Hodor! Hodor!","datePublished":"2023-07-25T00:26:55.185Z","url":"https://daily.dev/posts/LkicAkzCc#c-G8mbuunzg","author":{"@type":"Person","name":"Valdemar","url":"https://daily.dev/heyvaldemar","image":"https://media.daily.dev/image/upload/s--hNY2yBbX--/f_auto/v1768758611/avatars/avatar_ft0iS8AcGd90jdHVINKGp?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Wow! I just learnt new things about css viewport.","datePublished":"2023-07-12T16:10:49.454Z","url":"https://daily.dev/posts/LkicAkzCc#c-ApfbSxdUb","author":{"@type":"Person","name":"Mobashirul Alam Seam","url":"https://daily.dev/seam6130","image":"https://media.daily.dev/image/upload/s--zvKgGt1q--/f_auto/v1710319868/avatars/avatar_Zv4edm5Z5tQZgk1BEilyx"}},{"@type":"Comment","text":"New for you maybe. It has been talked about in about a million repeating blog posts for years.","datePublished":"2023-07-11T07:29:41.643Z","url":"https://daily.dev/posts/LkicAkzCc#c-sZBJgPfTh","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"}},{"@type":"Comment","text":"Nice","datePublished":"2023-07-11T05:03:21.427Z","url":"https://daily.dev/posts/LkicAkzCc#c-mjZfH6gWs","author":{"@type":"Person","name":"MD Hasan Patwary","url":"https://daily.dev/mdhassanpatwary","image":"https://media.daily.dev/image/upload/s--Q15xdUBK--/f_auto/v1756538528/avatars/avatar_pnxOyAOcjfEL2wZw2TFjM?_a=BAMClqZW0"}}]} ```