HTML/CSS 미리보기
조절 가능한 격리 iframe에서 반응형 레이아웃을 비교하세요.
스크립트는 제거되며 실행되지 않습니다. 미리보기는 allow-scripts가 없는 sandbox iframe을 사용합니다. 네이티브 기기, DPR 또는 실제 브라우저와의 완전한 일치를 시뮬레이션하지 않습니다.
모바일
데스크톱
사용 방법
사용 방법
- HTML과 CSS를 각각 붙여 넣습니다.
- 모바일 및 데스크톱 너비를 조절합니다.
- 두 미리보기를 확인하되 네이티브 기기나 DPR 에뮬레이터가 아님을 기억하세요.
스크립트는 실행되지 않음
srcdoc에 넣기 전에 script와 인라인 이벤트 속성을 제거하고 allow-scripts 없는 sandbox="" iframe을 사용합니다.
너비 조절
모바일과 데스크톱에 별도의 CSS 뷰포트 너비를 설정합니다.
제한
네이티브 컨트롤, DPR, 터치, 브라우저 UI 또는 실제 브라우저 간 완전한 일치를 시뮬레이션하지 않습니다.
자주 묻는 질문
더 알아보기
JavaScript가 실행되나요?
아니요. script와 인라인 이벤트를 제거하고 allow-scripts를 사용하지 않습니다.
휴대폰을 시뮬레이션하나요?
아니요. CSS 뷰포트 너비만 변경합니다.
코드가 업로드되나요?
페이지는 코드를 업로드하지 않고 브라우저에서 미리보기를 구성합니다. 단, HTML이나 CSS의 외부 URL은 리소스를 요청할 수 있습니다.