[{"data":1,"prerenderedAt":198},["ShallowReactive",2],{"term-v\u002Fviewport":3,"related-v\u002Fviewport":180},{"id":4,"title":5,"acronym":6,"body":7,"category":161,"description":162,"difficulty":163,"extension":164,"letter":165,"meta":166,"navigation":109,"path":167,"related":168,"seo":174,"sitemap":175,"stem":178,"subcategory":6,"__hash__":179},"terms\u002Fterms\u002Fv\u002Fviewport.md","Viewport",null,{"type":8,"value":9,"toc":155},"minimark",[10,15,19,23,31,35,144,148,151],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor. CSS uses viewport units like vw (viewport width) and vh (viewport height) so you can size things relative to the screen.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25,26,30],{},"The viewport is the visible area of a web document as rendered in the browser. Viewport dimensions are exposed via window.innerWidth\u002FinnerHeight. CSS viewport units (vw, vh, vmin, vmax, svh, dvh) size elements relative to the viewport. The ",[27,28],"meta",{"name":29},"viewport"," tag controls how browsers scale pages on mobile.",[11,32,34],{"id":33},"show-me-the-code","Show Me The Code",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 100% of viewport width and height *\u002F\n.hero {\n  width: 100vw;\n  height: 100vh;\n}\n\n\u002F* Use dvh for mobile — accounts for browser chrome *\u002F\n.full-screen {\n  height: 100dvh;\n}\n","css","",[43,44,45,54,68,85,98,104,111,117,127,139],"code",{"__ignoreMap":41},[46,47,50],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sHwdD","\u002F* 100% of viewport width and height *\u002F\n",[46,55,57,61,65],{"class":48,"line":56},2,[46,58,60],{"class":59},"sMK4o",".",[46,62,64],{"class":63},"sBMFI","hero",[46,66,67],{"class":59}," {\n",[46,69,71,75,78,82],{"class":48,"line":70},3,[46,72,74],{"class":73},"sqsOY","  width",[46,76,77],{"class":59},":",[46,79,81],{"class":80},"sbssI"," 100vw",[46,83,84],{"class":59},";\n",[46,86,88,91,93,96],{"class":48,"line":87},4,[46,89,90],{"class":73},"  height",[46,92,77],{"class":59},[46,94,95],{"class":80}," 100vh",[46,97,84],{"class":59},[46,99,101],{"class":48,"line":100},5,[46,102,103],{"class":59},"}\n",[46,105,107],{"class":48,"line":106},6,[46,108,110],{"emptyLinePlaceholder":109},true,"\n",[46,112,114],{"class":48,"line":113},7,[46,115,116],{"class":52},"\u002F* Use dvh for mobile — accounts for browser chrome *\u002F\n",[46,118,120,122,125],{"class":48,"line":119},8,[46,121,60],{"class":59},[46,123,124],{"class":63},"full-screen",[46,126,67],{"class":59},[46,128,130,132,134,137],{"class":48,"line":129},9,[46,131,90],{"class":73},[46,133,77],{"class":59},[46,135,136],{"class":80}," 100dvh",[46,138,84],{"class":59},[46,140,142],{"class":48,"line":141},10,[46,143,103],{"class":59},[11,145,147],{"id":146},"when-youll-hear-this","When You'll Hear This",[16,149,150],{},"\"The modal should fill the viewport on mobile.\" \u002F \"Use dvh instead of vh on mobile — vh doesn't account for the address bar.\"",[152,153,154],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":41,"searchDepth":56,"depth":56,"links":156},[157,158,159,160],{"id":13,"depth":56,"text":14},{"id":21,"depth":56,"text":22},{"id":33,"depth":56,"text":34},{"id":146,"depth":56,"text":147},"frontend","The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor.","beginner","md","v",{},"\u002Fterms\u002Fv\u002Fviewport",[169,170,171,172,173],"Responsive Design","Media Query","Breakpoint","Mobile First","Box Model",{"title":5,"description":162},{"changefreq":176,"priority":177},"weekly",0.7,"terms\u002Fv\u002Fviewport","yBfajnsiWsoj9J7G2o6quNQA2h-feiQTDK-5hDSyCTI",[181,184,189,192,195],{"title":173,"path":182,"acronym":6,"category":161,"difficulty":163,"description":183},"\u002Fterms\u002Fb\u002Fbox-model","The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin.",{"title":171,"path":185,"acronym":6,"category":186,"difficulty":187,"description":188},"\u002Fterms\u002Fb\u002Fbreakpoint","general","intermediate","A breakpoint is like a 'pause game' button you place on a specific line of code.",{"title":170,"path":190,"acronym":6,"category":161,"difficulty":163,"description":191},"\u002Fterms\u002Fm\u002Fmedia-query","A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.",{"title":172,"path":193,"acronym":6,"category":161,"difficulty":163,"description":194},"\u002Fterms\u002Fm\u002Fmobile-first","Mobile first means you design for the smallest screen first, then add styles as screens get bigger.",{"title":169,"path":196,"acronym":6,"category":161,"difficulty":163,"description":197},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",1776518322990]