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

CSS 미디어 쿼리: iPad만 타겟팅

도전 과제:

iPad 장치를 구체적으로 타겟팅하는 것은 어려운 일임이 입증되었습니다. 다른 태블릿과 장치 너비가 겹치는 경우. 최소/최대 너비 조건이 포함된 기존 CSS 미디어 쿼리를 사용하면 iPad를 LG Pad 및 Galaxy Tab과 같은 다른 기기와 효과적으로 분리할 수 없습니다.

해결책:

성공적 솔루션에는 장치 너비와 함께 장치 높이 및 방향 조건을 활용하는 것이 포함됩니다. 다음 미디어 쿼리는 특히 iPad용 스타일을 분리합니다.

• 세로 방향:

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

• 가로 방향:

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

이러한 미디어를 활용하여 쿼리를 수행하면 유사한 장치 너비를 가진 다른 태블릿을 제외하면서 iPad 장치에 특정 스타일을 적용할 수 있습니다. HTTP 호출을 최적화하려면 제공된 @media 규칙을 사용하여 이를 기존 공통 CSS 파일에 통합할 수 있습니다.

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