matchmedia3 [event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6. [media] window screen orientation 감지해서 Landscape 보여주기 모바일 디바이스에서 portrait일 경우 가로로 웹사이트 렌더링 시키기 function updateOrientation() { const container = document.getElementById('orientation-container'); const isPortrait = window.matchMedia('(orientation: portrait)').matches; const isSmallScreen = window.matchMedia('(max-width: 798px)').matches; if (isPortrait && isSmallScreen) { container.classList.add('force-landscape'); } e.. 2023. 3. 31. How to change themes between light and dark, @media /* TODO */ :root { --loading-height: 140px; --white: #ffffff; --black: #000000; } .light-theme { --background-color: var(--white); --color: var(--black); } .dark-theme { --background-color: var(--black); --color: var(--white); } * { transition: background-color 0.2s ease, color 0.1s ease; } /* TODO dark mode 처리 */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-co.. 2022. 10. 10. 이전 1 다음
