CSS 미디어 쿼리를 사용하여 iOS 장치를 어떻게 타겟팅할 수 있나요?

CSS 미디어 쿼리를 사용한 iOS 장치 타겟팅

반응형 디자인 영역에서는 웹페이지를 특정 장치에 맞게 조정하는 것이 필요합니다. 일반적인 요구 사항 중 하나는 iOS 기기만 타겟팅하는 것입니다.

iOS 기기용 미디어 쿼리

iOS 전용 @media 쿼리는 없지만 @supports 규칙을 사용하는 솔루션:

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

쿼리

이 쿼리는 iOS의 Safari Mobile에서만 구현되는 "-webkit-touch-callout" 속성을 활용합니다. 지원 여부를 확인하면 iOS 기기를 다른 기기와 구별할 수 있습니다.

장점 및 주의사항

• 이 기술을 사용하면 다른 기기에 영향을 주지 않고 iOS 기기를 정확하게 타겟팅할 수 있습니다. 비슷한 화면 크기의 플랫폼입니다.
• 인터넷에서는 @supports가 작동하지 않는다는 점에 유의하는 것이 중요합니다. Explorer.
• 현재 iOS에서 작동하지만 Apple이 향후 릴리스에서 지원을 단계적으로 중단하지 않을 것이라는 보장은 없습니다.

대체 접근 방식

Apple의 개발자 웹사이트는 iOS의 Safari에서 지원하는 포괄적인 CSS 속성 목록을 제공합니다. 이러한 속성을 조사하면 iOS 장치를 타겟팅하기 위한 추가 대안을 찾을 수 있습니다.

위 내용은 CSS 미디어 쿼리를 사용하여 iOS 장치를 어떻게 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!