이슈노트📝 자동 다크모드 해제

이슈노트

Urime 2024. 4. 8. 11:04

테스트 과정에서 발견된 문제였다.

바로 다크모드 설정이 된 삼성 갤럭시로 화면을 볼 경우,

화면이 너무 어둡고 구분이 되질 않아 가시성이 떨어진다는 것!

디자인이 화이트 톤으로 되어 있어서 생긴 문제다.

원인 역시 간단하다.

다크모드가 되어서 생긴 문제이니

2가지 해결방법을 생각했다.

사이트 오픈을 코앞에 둔 시기라 1번 방법은 패쓰!

2번 방법은 간단하게 head영역에 meta코드 몇 줄만 추가 하면된다.

<head>
  <meta name="color-scheme" content="light only"/>
  <meta name="supported-color-schemes" content="light"/>
</head>

추가로 meta 관련된 포스팅은 아래 링크를 참조하자.

이슈노트📝 모바일 화면에서 반응형 적용이 안 되는 문제

🚨 문제상황 버튼 클릭 시 새창으로 이동하는 화면이 있었다. 새 창에서 열린 페이지에선 반응형이 적용이 안되는 문제가 발생! 원래 화면보다 작게 보여서 사용자들에게 불편함이 생겼다. 💡

yurim99.tistory.com

📙 Open Graph이란? - 링크의 미리보기 제목, 설명, 이미지를 지정하는 meta 태그 속성 중 하나이다. - 페이스북에서 창시 했으며 현재는 많은 곳에서 사용한다. 1. Naver 블로그, 카카오톡 미리보기

yurim99.tistory.com

참고 글

[HTML/CSS] 웹에서 다크모드를 막아보자

다크모드가 대응이 안되있는 상태에서 브라우저 마음대로 색상을 반전시켜서 곤란해질때가 있다. 이럴때는 다크모드를 막아버려야하는데, 다음과 같이 막을 수 있다. :root { color-scheme: light only;

jizard.tistory.com