사파리

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 스타일 값이 적..

오늘은 아이폰(아이패드)의 기본 브라우저인 사파리에 추가해두면 유용하게 쓰일 책갈피 몇 가지를 소개해볼까 합니다. 사파리 기본 공유 항목엔 페이스북, 트위터, 중국산 SNS인 Weibo 등 밖에 없기 때문에 이미 많은 분들이 사용하는 에버노트나 구글플러스 등의 유저분들에겐 살짝 아쉽습니다. 사파리 브라우저를 이용해 현재 보고 있는 페이지를 Evernote로 저장하거나 Pocket 읽기 목록에 추가하고 싶으실 때 아래 북마크를 추가해두시면 간편하게 공유할 수 있습니다. 잘 알려진 서비스의 공유와 관련된 유용한 북마크가 더 있으시다면 댓글로 일러주세요. (2편 보러가기) 스크립트 형식의 북마크 추가 방법 사파리에서 아무 페이지(네이버 등)를 즐겨찾기(책갈피)에 추가합니다. 책갈피 > 편집을 눌러 원하는 서비..