iPhone 5의 고유한 화면 크기에 대해 내 웹사이트의 CSS 미디어 쿼리를 어떻게 최적화할 수 있습니까?

iPhone 5용 모바일 뷰 최적화: CSS 미디어 쿼리 조정

iPhone 5의 화면이 길어지면 기존 모바일 뷰 쿼리가 효과적으로 실패할 수 있습니다. 그 크기를 포착하십시오. 따라서 iPhone 5에 맞게 미디어 쿼리를 조정하고 웹 사이트가 최적으로 표시되도록 하는 것이 중요합니다.

기존 쿼리 결합

기존 미디어 쿼리 장치 너비 제한을 기반으로 합니다. 구형 iPhone에서는 작동할 수 있지만 iPhone 5의 고유한 크기에 맞춰져 있지는 않습니다. 이 문제를 해결하려면 기기 종횡비 기능과 결합하면 됩니다.

@media only screen and (max-device-width: 480px) and (device-aspect-ratio: 40/71) {}

이 쿼리는 최대 너비가 480px이고 종횡비가 40:71인 기기를 대상으로 하며 이는 iPhone에만 적용됩니다. 5.

디바이스 측면 활용 비율

iPhone 5의 화면 비율은 대부분의 다른 스마트폰에서 사용되는 일반적인 16:9 형식과 다릅니다. 기기 종횡비 기능을 사용하면 다양한 iPhone 모델에 대한 타겟 쿼리를 생성할 수 있습니다.

• iPhone < 5: @media 화면 및 (기기 종횡비: 2/3) {}
• iPhone 5: @media 화면 및 (기기 종횡비: 40/ 71) {}
• iPhone 6: @media 화면 및 (기기 종횡비: 375/667) {}
• iPhone 6 Plus: @media 화면 및 (기기 종횡비: 16/9) {}

이를 통해 각 특정 iPhone 모델의 웹사이트 모양을 미세 조정하여 모바일 보기를 최적화할 수 있습니다. 각 기기의 고유한 화면 크기에 따라 달라집니다.

위 내용은 iPhone 5의 고유한 화면 크기에 대해 내 웹사이트의 CSS 미디어 쿼리를 어떻게 최적화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!