# 듀얼스크린 과 폴더블용 웹 레이아웃 만들기

> Clean Markdown view of GeekNews topic #6123. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=6123](https://news.hada.io/topic?id=6123)
- GeekNews Markdown: [https://news.hada.io/topic/6123.md](https://news.hada.io/topic/6123.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-03-11T10:19:04+09:00
- Updated: 2022-03-11T10:19:04+09:00
- Original source: [smashingmagazine.com](https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/)
- Points: 6
- Comments: 0

## Topic Body

- 갤럭시 폴드/플립, 서피스 듀오 같은 기기들을 웹에서 지원하기   
- CSS에서 horizontal-viewport-segments , vertical-viewport-segments 값이 "2"인지 미디어쿼리로 체크   
- JS에서 window.visualViewport.segments 로 체크  
→ Canvas2D 및 WebGL 등에 적용  
- env() 에서 viewport-segment-width/height/top/left/bottom/right 사용  
→ Hinge의 넓이 계산 가능

## Comments



_No public comments on this page._