CSS 미디어 쿼리를 사용하여 iPad를 구체적으로 타겟팅하는 방법은 무엇입니까?

iPad만을 대상으로 하는 CSS 미디어 쿼리 개발

iPad, Galaxy Tab, Acer Iconia, LG 3D Pad 등 다양한 태블릿 장치로 작업할 때 CSS 미디어 쿼리로 특정 장치를 타겟팅하는 것은 어려울 수 있으며, 특히 유사한 속성을 공유하는 경우 더욱 그렇습니다. iPad와 LG Pad를 예로 들어보겠습니다. 둘 다 장치 너비가 768px이므로 구별하기 어렵습니다.

이 문제를 해결하고 CSS3 미디어 쿼리만 사용하여 iPad를 대상으로 지정하려면 다음 해결 방법을 고려하십시오.

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

이것은 접근 방식은 특정 기기 너비, 높이 및 방향 기준을 정의하여 iPad를 정확하게 타겟팅합니다.

또는 HTTP 요청을 최소화하기 위해 기존 CSS 파일에 미디어 쿼리를 삽입할 수 있습니다.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* CSS rules for iPad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* CSS rules for iPad landscape */
}

자세한 내용은 다음 리소스를 참조하세요.

• [CSS를 사용하여 다양한 장치 플랫폼 감지](https://css-tricks.com/snippets/css/Detect- Different-device-platforms- using-css/)
• [기타 표준 CSS3 기능](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html)

위 내용은 CSS 미디어 쿼리를 사용하여 iPad를 구체적으로 타겟팅하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!