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

CSS 미디어 쿼리를 사용하여 iPad를 독점적으로 타겟팅

다중 기기 환경에서는 특정 기기를 분리하는 것이 어려울 수 있으며, 특히 공유하는 경우에는 더욱 그렇습니다. 비슷한 치수. 그러한 사례 중 하나는 장치 너비가 모두 768px인 LG Pads 및 Galaxy Tabs와 같은 다른 태블릿과 iPad를 구별하는 것입니다.

이 문제를 해결하기 위해 CSS 미디어 쿼리가 솔루션을 제공합니다. 그러나 min-device-width 및 max-device-width와 같은 기존 방법은 너비가 겹치기 때문에 효과적이지 않습니다.

해결책:

마지막으로 장치를 활용하는 방법입니다. height는 문제를 해결합니다.

<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" />

이 솔루션은 너비가 768px, 높이가 768px인 장치를 대상으로 합니다. 1024px, 세로 또는 가로 방향으로 iPad를 효과적으로 분리합니다.

HTTP 호출을 최소화하기 위해 미디어 쿼리를 기본 CSS 파일에 삽입할 수 있습니다.

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

추가로 다음을 참조하세요. 자세한 내용은 다음 리소스를 참조하세요. 통찰력:

• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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