iPhone Duo Testerduoresponsive.com

iPhone Duo 반응형 테스터 | 웹사이트 모바일 반응형 검사기

가장 정확한 웹사이트 반응형 검사기 및 모바일 반응형 검사기. 듀얼 스크린 iPhone Duo, 폴더블 디스플레이 및 최신 기기에서 실시간으로 웹사이트 레이아웃을 확인하세요.

iPhone Duo대화형 3D 하드웨어 시뮬레이터
활성 듀얼 뷰포트
배율:
Live Presets:
Zoom:
9:41
5G
Active Posture: Landscape|7.6″ Folding Display · 2670 × 1878 px (890 × 626 pt) · 430 ppi Super Retina XDR
CSS Viewport Media Feature:@media (orientation: landscape)
개발자 커뮤니티 분석

iPhone Duo가 미흡한 반응형 웹 디자인을 드러내는 이유

10년 넘게 반응형 웹 디자인은 단일 연속 캔버스를 전제로 했습니다. Apple의 듀얼 스크린 iPhone Duo 출시는 물리적 힌지로 연결된 두 화면으로 이 가정을 완전히 뒤흔듭니다.

힌지 트랩

중앙 정렬된 검색창, 모달, 버튼, 히어로 이미지가 세그먼트 미지원 CSS 상태에서 16px 물리적 힌지에 의해 정확히 양분됩니다.

정사각형에 가까운 화면비

펼친 듀얼 화면은 1:1에 가까운 화면비를 갖습니다. 세로 스크롤에만 최적화된 레이아웃은 빈 공간이 과도하게 발생합니다.

새로운 CSS 표준

W3C 듀얼 스크린 미디어 쿼리와 CSS 환경 변수(env(viewport-segment-width))는 이제 프론트엔드 개발자의 필수 지식입니다.

iPhone Duo 및 듀얼 스크린 권장 CSS:CSS Fold 표준 규격
/* Detect iPhone Duo & dual-screen unfolded mode */
@media (horizontal-viewport-segments: 2) {
  .site-container {
    display: grid;
    /* Map columns to screen 1 and screen 2 with fold gap in between */
    grid-template-columns: 
      env(viewport-segment-width 0 0) 
      calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0)) 
      env(viewport-segment-width 1 0);
  }

  .sidebar {
    grid-column: 1;
  }

  .main-content {
    grid-column: 3;
  }
}
유니버설 기기 카탈로그

인기 있는 모든 기기에서 테스트

iPhone, Android 폴더블 및 Microsoft 듀얼 스크린 기기 간 반응형 지원을 비교하세요.

iPhone폴더블Android태블릿Surface
AppleNewly Launched

iPhone Duo (Unfolded)

7.6″ Super Retina XDR OLED (2670×1878 at 430 ppi)

Viewport890 × 626 px
DPR / Scale3x
CSS Query@media (orientation: landscape)
Test Device
AppleNewly Launched

iPhone Duo (Cover Folded)

5.4″ Super Retina XDR OLED (1398×2034 at 460 ppi)

Viewport466 × 678 px
DPR / Scale3x
CSS Query@media (orientation: portrait)
Test Device
Apple

iPhone 16 Pro Max

Flagship Super Retina XDR

Viewport440 × 956 px
DPR / Scale3x
CSS Querymax-width: 440px
Test Device
AndroidNewly Launched

Samsung Galaxy Z Fold 6

Dynamic AMOLED 2X Foldable

Viewport768 × 904 px
DPR / Scale2.6x
CSS Queryscreen-spanning: single-fold-vertical
Test Device
Android

Google Pixel Fold

Foldable OLED Landscape Inner Screen

Viewport840 × 700 px
DPR / Scale2.6x
CSS Queryhorizontal-viewport-segments: 2
Test Device
MicrosoftNewly Launched

Microsoft Surface Duo 2

Dual Screen AMOLED with Physical Gap

Viewport1344 × 1892 px
DPR / Scale2.5x
CSS Query@media (screen-spanning: single-fold-vertical)
Test Device
Expert Q&A

Frequently Asked Questions

Everything you need to know about testing website responsiveness on iPhone Duo and modern devices.

iPhone Duo 반응형 테스터란 무엇인가요?

iPhone Duo 반응형 테스터 (duoresponsive.com)는 Apple의 신형 듀얼 스크린 iPhone Duo, 최신 폴더블 및 모바일 기기에서 웹페이지를 실시간으로 미리 보고 테스트할 수 있는 온라인 웹사이트 모바일 반응형 검사기입니다. 펼쳐진 듀얼 디스플레이, 접힌 커버 화면, 힌지 이음새 간격 및 듀얼 스크린 CSS 미디어 쿼리를 픽셀 단위로 정확하게 시뮬레이션합니다.

이 웹사이트 반응형 검사기는 어떻게 작동하나요?

테스트 표시줄에 웹사이트 URL을 입력하면 도구가 브라우저 내에서 정밀한 하드웨어 프레임 안에 실시간 사이트를 렌더링합니다. 에뮬레이터를 설치하지 않고도 단일 화면과 듀얼 화면 확장 검사, 북 모드와 텐트 모드 전환, 중앙 폴드 라인 확인, 가로/세로 회전을 즉시 수행할 수 있습니다.

기존 반응형 웹사이트가 iPhone Duo에서 깨지는 이유는 무엇인가요?

대부분의 기존 웹사이트는 단일 연속 뷰포트를 전제로 합니다. iPhone Duo를 펼치면 16px 물리적 힌지로 연결된 두 개의 독립 화면에 걸쳐 표시됩니다. 듀얼 스크린 CSS(@media (horizontal-viewport-segments: 2) 및 env(viewport-segment-width))가 적용되지 않으면 검색창, 모달 창, 텍스트 열 및 히어로 이미지가 정중앙에서 잘릴 수 있습니다.

localhost와 같은 로컬 개발 서버도 테스트할 수 있나요?

네! iPhone Duo 반응형 테스터는 사용자의 브라우저에서 완전히 클라이언트 측으로 실행되므로 http://localhost:3000 또는 http://localhost:4321과 같은 로컬 개발 URL을 배포 전에 입력하여 바로 테스트할 수 있습니다.

웹사이트가 연결 거부 또는 빈 화면으로 표시되면 어떻게 해야 하나요?

일부 프로덕션 웹사이트(예: Google 또는 Twitter)는 iframe 삽입을 차단하는 X-Frame-Options: DENY와 같은 엄격한 HTTP 보안 헤더를 전송합니다. 이러한 도메인의 경우 '새 탭에서 열기' 버튼을 클릭하거나 개발 서버 또는 프록시를 통해 테스트할 수 있습니다.