점점 더 많은 웹 디자이너가 "반응형" 웹사이트를 구축하고 있습니다. 예를 들어 iPhone에서 Macgasm을 방문하면 홈페이지의 헤드라인 텍스트와 이미지가 자동으로 모바일 친화적인 크기로 조정됩니다. 웹사이트를 구축 중이고 다양한 화면 크기에서 웹사이트가 어떻게 표시되는지 확인하고 싶다면 Safari의 새로운 반응형 디자인 모드가 적합합니다.
이 기능을 사용하려면 OS X El Capitan을 실행해야 하며 아직 수행하지 않은 경우 Safari의 개발 메뉴를 켜야 합니다. 그렇게 하려면 Safari> 환경 설정으로 이동하십시오. , 고급을 클릭합니다. 을 클릭한 다음 "메뉴 막대에 개발 메뉴 표시" 확인란을 선택합니다.
작업 중인 웹페이지로 이동한 다음 개발> 반응형 디자인 모드 시작으로 이동합니다. . 마찬가지로 다양한 iOS 기기와 다른 일반적인 화면 해상도에서 페이지가 어떻게 보이는지 확인할 수 있습니다. 웹 페이지 가장자리에 마우스를 놓고 왼쪽이나 오른쪽으로 드래그하여 표시 가능한 영역의 크기를 조정할 수 있습니다. 제공되는 다양한 보기 가능 영역 간을 전환하고 기기마다 웹페이지가 어떻게 변경되는지 확인하세요. 이전에는 미처 발견하지 못했던 버그를 발견할 수도 있습니다.
완료되면 개발> 반응형 디자인 모드 종료로 이동합니다. .