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

CSS 미디어 쿼리를 사용하여 iPad만 타겟팅

CSS 미디어 쿼리로 특정 기기를 타겟팅하는 것은 어려울 수 있으며, 특히 기기가 유사한 화면 크기를 공유하는 경우 더욱 그렇습니다. iPad를 분리하려면 다음 접근 방식을 고려하세요.

기기 너비 및 기기 높이 사용:

제공되는 미디어 쿼리는 기기 너비와 기기 높이를 모두 지정하여 구체화할 수 있습니다. iPad 고유의 높이:

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1024px) and (max-device-height: 1024px)

장치 너비와 해상도 결합:

또는 장치 너비와 장치 해상도를 결합할 수 있습니다.

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

특정 스타일시트에 연결된 미디어 쿼리 사용:

효율성을 높이기 위해 iPad에 맞춰 별도의 스타일시트를 생성하고 기기별 미디어에 따라 조건부로 포함할 수 있습니다. 쿼리:

<code class="html"><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: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css"></code>

CSS 내에 미디어 쿼리 통합:

HTTP 요청을 줄이려면 기본 스타일시트 내에서 장치별 CSS 규칙을 정의할 수 있습니다.

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

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