모바일 장치용 CSS를 사용자 정의하는 방법: @media 핸드헬드가 여전히 관련이 있나요?

모바일 장치 CSS 사용자 정의:

많은 웹 개발자는 iPhone 및 Android 휴대폰과 같은 휴대용 장치용 CSS를 사용자 정의할 때 문제에 직면합니다. @media 핸드헬드를 사용하는 기존 방법은 여러 장치에서 동일하게 작동하지 않습니다.

해결책: @media 쿼리 사용

이 제한을 극복하려면 @media 쿼리를 사용합니다. 이 CSS 기술을 사용하면 화면 크기를 포함한 특정 기기 특성을 타겟팅할 수 있습니다.

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

이 쿼리는 특히 최대 화면 너비가 480px인 기기를 타겟팅하며, 이는 일반적으로 iPhone을 포함합니다.

iPhone은 예외

Safari로 구동되는 iPhone 브라우저는 다음과 같은 이유로 @media 핸드헬드를 인식하지 않습니다. 고급 CSS 렌더링 기능. 이는 이전 iOS 버전에 따라 다를 수 있습니다.

더 높은 해상도로 장치 타겟팅

Droid X와 같은 일부 최신 모바일 장치는 더 높은 해상도를 제공합니다. 이러한 장치를 수용하려면 화면 해상도를 통합하는 보다 구체적인 @media 쿼리를 사용하세요.

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

추가 읽기:

• [별도 목록: 미디어 쿼리 반응형 웹용 디자인](https://alistapart.com/article/active-web-design)
• [미디어 쿼리에 대한 W3C 후보 권장 사항](https://www.w3.org/TR/css3-mediaqueries/ )

위 내용은 모바일 장치용 CSS를 사용자 정의하는 방법: @media 핸드헬드가 여전히 관련이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!