[ios] safari css 적용

반응형 작업을 할 때 safari 특히 ios 14에서 css상의 많은 이슈가 발생했다.

해결을 위해 ios만 특정해서 css를 컨트롤 해 줄 일이 잦았는데

1. @supports를 활용한 방법

아래와 같은 코드를 사용하였다.

@supports (-webkit-touch-callout: none)  {
  ...
  }

• @supports는 해당 css를 제공하는 브라우저를 특정하여 스타일링을 제공하는 것이 가능한데
  and, or 같은 연산자를 통한 조건식을 만들어 주는 것도 가능하다.

확실한 적용을 위해 theme에 적용해두었던 width 사이즈와 함께 사용해주었다.

${({ theme }) =>
    theme.breakpoints.small(css`
      @supports (-webkit-touch-callout: none) {
        height: -webkit-fill-available;
      }
      height: 100vh;
      height: fill-available;
    `)}
`

2. 라이브러리의 이용

• react-device-detect라는 라이브러리의 이용

npm install react-device-detect --save

or

yarn add react-device-detect

훅과 컴포넌트들을 제공하는데

랩핑 컴포넌트 제공

<BrowserView>
  <h1>This is rendered only in browser</h1>
</BrowserView>
<MobileView>
  <h1>This is rendered only on mobile</h1>
</MobileView>

boolean 값을 반환하는 훅 제공

import {isMobile} from 'react-device-detect';

function App() {
  renderContent = () => {
    if (isMobile) {
      return <div> This content is available only on mobile</div>
    }
    return <div> ...content </div>
  }

  render() {
    return this.renderContent();
  }
}

• 내부 구조를 살펴보니 user-agent를 파싱해서 react 훅과 컴포넌트로 wrapping한 라이브러리이다.

//hooks/useDeviceData.js /

import { parseUserAgent } from '../../lib/parse';

export function useDeviceData(userAgent) {
  const hookUserAgent = userAgent ? userAgent : window.navigator.userAgent
  return parseUserAgent(hookUserAgent)
}

//src/lib/parse.js 


const UAParser = require('ua-parser-js/dist/ua-parser.min');

export const ClientUAInstance = new UAParser();

export const browser = ClientUAInstance.getBrowser();
export const cpu = ClientUAInstance.getCPU();
export const device = ClientUAInstance.getDevice();
export const engine = ClientUAInstance.getEngine();
export const os = ClientUAInstance.getOS();
export const ua = ClientUAInstance.getUA();
export const setUa = (userAgentString) => ClientUAInstance.setUA(userAgentString);

export const parseUserAgent = (userAgent) => {
  if (!userAgent) {
    console.error('No userAgent string was provided');
    return;
  }

  const UserAgentInstance = new UAParser(userAgent);

  return {
    UA: UserAgentInstance,
    browser: UserAgentInstance.getBrowser(),
    cpu: UserAgentInstance.getCPU(),
    device: UserAgentInstance.getDevice(),
    engine: UserAgentInstance.getEngine(),
    os: UserAgentInstance.getOS(),
    ua: UserAgentInstance.getUA(),
    setUserAgent: (userAgentString) => UserAgentInstance.setUA(userAgentString),
  };
};

위와 같이 다양한 정보를 제공받을 수 있어 반응형에 굉장히 편리한 라이브러리이다.

참고: https://github.com/duskload/react-device-detect
https://developer.mozilla.org/ko/docs/Web/CSS/@supports