LG 3D Pad 및 Galaxy Tab과 같은 다른 태블릿을 제외하면서 CSS 미디어 쿼리로 iPad를 구체적으로 타겟팅하려면 어떻게 해야 합니까?

iPad 타겟팅을 위한 CSS 미디어 쿼리

CSS 미디어 쿼리로 특정 기기를 타겟팅하는 것은 어려울 수 있으며, 특히 여러 기기가 유사한 크기를 공유하는 경우 더욱 그렇습니다. 이 경우 LG 3D 패드, 갤럭시 탭 등 다른 태블릿은 제외하고 아이패드만을 타겟으로 하는 것이 목표입니다.

기기 크기 및 화면 해상도

iPad의 화면 해상도는 1024 x 768픽셀로, 너비는 LG 3D 패드와 동일하지만 Galaxy Tab과는 동일하지 않습니다. LG Pad의 해상도는 1280 x 768픽셀이고, Galaxy Tab의 해상도는 1280 x 800픽셀입니다.

표준 CSS 미디어 쿼리

제공되는 미디어 iPad만을 타겟팅하는 데에는 쿼리가 충분하지 않습니다. min-device-width 및 max-device-width 속성은 iPad와 LG Pad 모두 장치 너비가 768px이므로 구별할 수 없습니다. 마찬가지로 min-solution 및 max-device-width 속성은 공유 해상도 범위가 132dpi이므로 장치를 구별할 수 없습니다. 기기 종횡비 속성은 iPad와 LG Pad를 구별하지 않습니다.

기기별 CSS 미디어 쿼리

iPad를 독점적으로 타겟팅하려면 다음을 수행해야 합니다. 기기별 CSS 미디어 쿼리를 사용하세요. iPad를 세로 및 가로 방향으로 타겟팅하는 데 다음 미디어 쿼리를 사용할 수 있습니다.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  /* CSS rules for iPad portrait */
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* CSS rules for iPad landscape */
}

이러한 미디어 쿼리는 정확한 장치 크기와 방향을 지정하여 iPad에만 적용되도록 합니다. 이러한 쿼리를 사용하면 다른 기기에서는 다양한 스타일을 유지하면서 iPad에만 스타일을 적용할 수 있습니다.

추가 고려 사항

불필요한 HTTP 호출을 방지하려면 다음을 포함할 수 있습니다. 기존 공통 CSS 파일 내의 기기별 CSS:

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

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

이 접근 방식을 사용하면 HTTP 요청을 최소화하면서 iPad를 구체적으로 타겟팅할 수 있습니다.

위 내용은 LG 3D Pad 및 Galaxy Tab과 같은 다른 태블릿을 제외하면서 CSS 미디어 쿼리로 iPad를 구체적으로 타겟팅하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!