CSS @media 쿼리로 iPhone 및 Android 브라우저를 어떻게 타겟팅합니까?

iPhone 및 Android 브라우저에서 CSS @media 핸드헬드 지원

웹 페이지를 모바일 브라우저에 맞게 조정하기 위해 개발자는 다음을 시도할 수 있습니다. CSS @media 휴대용 쿼리는 페이지의 모양을 변경합니다. 그러나 Safari를 통한 iPhone과 같은 일부 플랫폼에서는 이 접근 방식을 무시합니다.

iPhone 및 Android에 대한 대체 접근 방식

이 제한 사항을 해결하기 위해 권장되는 솔루션은 다음과 같습니다. 특정 장치 특성을 지정하는 미디어 쿼리를 사용합니다. 다음 코드는 iPhone(또는 화면 너비가 480px 이하인 모든 장치)을 대상으로 하는 방법을 보여줍니다.

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)" />

고해상도 장치 대상 지정

설명한 대로, Droid X와 같은 장치는 앞서 언급한 쿼리로 감지되지 않을 수 있는 더 높은 해상도를 가지고 있습니다. 이러한 장치를 타겟팅하기 위해 미디어 쿼리는 해상도와 같은 장치의 물리적 특성을 검사할 수 있습니다.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

추가 리소스

더 자세한 통찰력은 제공된 A에서 찾을 수 있습니다. 미디어 쿼리에 대한 별도 기사 및 W3 권장 사항을 나열합니다.

위 내용은 CSS @media 쿼리로 iPhone 및 Android 브라우저를 어떻게 타겟팅합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!