Safari

Safari 개발자 도구💡 아이폰 화면이 잠겨있을 땐 콘솔을 사용할 수 없다. ❶ 맥북 ⇄ 아이폰 USB 연결❷ 아이폰 설정 → Safari → 고급 → 체크❸ macOS 사파리 설정 → 고급 → 체크❹ macOS 사파리 상단 메뉴 → 개발자용 → 아이폰 기기 이름 → 아이폰 사파리에 열려있는 웹사이트 선택❺ macOS 사파리 콘솔 창에서 현재 연동중인 웹사이트의 속성 확인 iOS Simulator💡 Status bar(노치 영역), Nav bar, Tab bar(주소창 영역), Home indicator 같은 아이폰 UI를 그대로 표현하므로 실물 기기를 이용할 때 어떻게 보일지 확인할 수 있다. 설정을 완료한 후 Xcode 실행 없이 스포트라이트에서 Simulator를 검색한 후 바로 실행할 수..

iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..

아이폰 iOS 15 부터 사파리 브라우저 탭 막대에 테마 색상을 추가할 수 있다. 탭 막대 색상은 콘텐츠를 기반으로 자동 선택되지만 태그를 이용해서 원하는 색상으로 변경할 수 있다. 참고로 content 속성 값엔 컬러코드 대신 CSS 변수를 사용할 수도 있다. e.g. content="var(--bg-black)" 테마 색상 변경 전 ▼ 테마 색상 변경 후 ▼ Light/Dark 모드 컬러라이트/다크 모드에서 각각 다른 색을 보이고 싶으면 미디어 쿼리를 사용하면 된다. 아래 예시에서 라이트 모드일 때 탭 막대 색상은 #ffffff(하얀색), 다크 모드일 땐 #28231c 색으로 표시된다. 레퍼런스Safari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..