CSS로 iPhone 및 iPad 장치를 감지하는 방법은 무엇입니까?

CSS로 iPhone/iPad 감지: 문제 해결 및 솔루션

원래 질문은 CSS 스타일을 통해서만 iPhone 및 iPad 장치를 감지하는 것이었습니다. "@media handheld, only screen and (max-device-width: 480px)"를 사용하여 솔루션을 구현하려는 초기 시도는 성공하지 못했습니다.

해결책:

iPhone, iPad 및 특정 변형을 효과적으로 탐지하려면 보다 포괄적인 접근 방식이 필요합니다. 다음 CSS 미디어 쿼리는 다양한 기기 화면 크기 및 픽셀 비율을 구체적으로 대상으로 합니다.

iPhone 및 iPod touch:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 및 iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

이러한 미디어 쿼리를 스타일시트에 통합하면 특정 CSS 스타일이 기반으로 적용되도록 할 수 있습니다. 감지된 장치 유형에 대해 이 접근 방식은 더 큰 유연성을 제공하며 웹사이트나 애플리케이션의 모양을 다양한 iOS 기기에 맞게 조정할 수 있습니다.

위 내용은 CSS로 iPhone 및 iPad 장치를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!