모바일 장치용 CSS 조정: @media 휴대용 제한 사항 이해

iPhone 및 Android와 같은 모바일 브라우저에 맞게 CSS를 특별히 사용자 정의하려고 할 때 다음 사항을 알아야 합니다. @media 핸드헬드의 한계. 이 미디어 쿼리 유형은 과거에 사용되었지만 모바일 장치, 특히 고급 디스플레이 기능이 있는 장치에서는 보편적으로 지원되지 않습니다.

원하는 효과를 얻으려면 대체 접근 방식을 고려하십시오.

사용 @media 화면 쿼리

@media 휴대용 대신 @media 화면 쿼리를 사용합니다. 이러한 쿼리를 사용하면 해상도, 장치 너비 등 특정 화면 특성을 기반으로 장치를 타겟팅할 수 있습니다. 예를 들어 iPhone용 웹페이지 스타일을 지정하려면:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

CSS 기능 쿼리 활용

또는 CSS 기능 쿼리를 사용하여 특정 브라우저 기능을 감지할 수 있습니다. 예를 들어 미디어 쿼리가 지원되는지 확인하려면:

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

장치 해상도 타겟팅

특정 해상도의 장치를 타겟팅하려면 @media 쿼리를 해상도 미디어 기능과 결합할 수 있습니다.

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

추가 리소스

• [미디어 쿼리에 대한 W3C 후보 권장 사항](https://www.w3.org/TR/css3-mediaqueries/)
• [Apple의 모바일 웹킷 개발자 가이드](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [별도 목록: 다중 뷰포트 설계](https: //alistapart.com/article/viewports)