크로스 브라우징 2

브라우저 언어와 크로스 브라우징

최근 사내 프로젝트 개발 중 국내 사용자에게만 가격 정보를 가리는 기능을 구현할 일이 있었습니다. 여러 조건들을 고려하며 진행하던 중, 브라우저에서 설정된 언어를 어떻게 감지할 수 있을까?라는 고민이 생겼고, 이 과정에서 Web APIs의 Navigator 객체에 대해 알게 되었습니다.Navigator 객체에는 language라는 속성이 있는데, 이 값이 사용자가 브라우저에 설정한 언어를 나타냅니다. 그러나 여기서 문제가 하나 더 발생했습니다. 브라우저마다 한국어를 표현하는 방식이 달랐던 것입니다.* 버전마다 차이가 존재할 수 있습니다.일반적으로 Chrome과 Edge: ko일반적으로 Safari, Firefox, Opera: ko-KR같은 한국어라도 브라우저에 따라 ko 혹은 ko-KR로 반환되기 때문..

지식 정리 📝 2024.10.17

크로스브라우징(Cross Browsing) - iOS 환경에서 키보드가 화면을 가리는 문제 해결

문제 상황 AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다. 대부분의 환경에서는 문제가 발생하지 않았지만, iOS 환경에서는 input이나 textarea를 통해 글자를 입력할 때 키보드가 올라오면서 화면의 너비를 인식하지 못해 키보드에 화면이 가려지는 문제가 발생했습니다.   문제 해결이 문제를 해결하기 위해 CSS와 JavaScript를 사용하여 화면의 높이가 변할 때 동적으로 vh(viewport height) 값을 재설정하는 방법을 사용했습니다. 구체적인 코드는 다음과 같습니다./* css */#viewContainer { height: 100vh; height: calc(var(..

지식 정리 📝 2024.06.20