내 미디어 쿼리가 브라우저에서는 작동하지 않지만 모바일 장치에서는 작동하는 이유는 무엇입니까?

미디어 쿼리: 특정 장치 해상도에 맞게 스타일 조정

@media min-width 및 max-width 속성은 장치 해상도에. 그러나 이 설정을 사용할 때 일반적인 문제가 발생합니다. 모바일 장치에서는 작동하지만 브라우저에서는 작동하지 않습니다.

문제 원인

이 문제는 뷰포트 너비와 사용자 확장성을 지정하는 메타 태그입니다. 이 메타 태그를 사용하면 장치의 기본 설정을 효과적으로 재정의할 수 있습니다. 따라서 장치 크기를 기반으로 하는 @media 규칙은 부정확해집니다.

해결책: 스타일 재정렬

해결책은 CSS를 재정렬하여 이전 브라우저에 대한 기본 스타일의 우선순위를 지정하는 것입니다. @media를 지원하지 않습니다. 그런 다음 @media 규칙을 사용하여 다양한 장치 해상도에 특정 스타일을 적용합니다. 권장되는 접근 방식은 다음과 같습니다.

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

추가 고려 사항

• iPad 화면은 일반적으로 iPhone보다 크므로 별도의 @media 규칙이 필요할 수 있습니다.
• @media print{} 속성을 사용하여 인쇄 가능한 버전의 스타일을 지정할 수 있습니다.
• 항상 다양한 기기와 브라우저에서 스타일을 철저하게 테스트하여 올바르게 렌더링되는지 확인하세요.

위 내용은 내 미디어 쿼리가 브라우저에서는 작동하지 않지만 모바일 장치에서는 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!