meta

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

, , 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 수 없기 때문에 접근성이 떨어지는 단점이 있다. initial-scale 초기 화면 배율max..