저는 망막 장치에서 무시되는 몇 가지 미디어 쿼리를 가지고 있습니다 (예 : iPhone 6 Plus). iPhone 6 Plus의 화면 최소 장치 너비는 414 픽셀입니다. 다음 미디어 쿼리를 사용하면 customClass div의 너비가 100 %가 될 것으로 기대합니다. 그러나이 클래스를 사용하는 div는 여전히 33.33333 %입니다. 예를 들어망막 장치에 자체 미디어 쿼리가 필요합니까?
(나는 수레 등을 제거, 예제의 코드 아래 단순화했습니다), 나는 다음과 같은 CSS가 : 나는 그건 그렇고, 내 헤더이이
.customClass {
width: 33.33333%;
}
@media screen and (max-width: 800px) {
.customClass {
width: 100%;
}
}
:
를<meta name="viewport" content="width=device-width, initial-scale=1">
위의 뷰포트 메타 태그로 생각하면 기기 너비 (414px)가 너비로 사용되므로 .customClass에서 100 % 너비를 사용해야합니다.
픽셀 밀도가 높아서 800px 너비 쿼리를 무시하는 것 같습니다.하지만 그 이유는 확실하지 않습니다.
많은 연구와 연구 끝에 @ 2x 이미지를 사용하는 경우, 예를 들어 모든 망막 스크린을 타겟팅하는 경우에만 망막 미디어 쿼리를 사용하고 싶습니다. 위의 작업). 그래서 나는 iPhone 6 Plus에 100 % 너비를 전달하기 위해 only screen and (min-device-pixel-ratio: 2)과 같은 망막 미디어 쿼리가 필요하다고 생각하지 않습니다.
걱정할 장치가 너무 많아서 장치 별 미디어 쿼리가 발생하지 않도록하기 위해 노력하고 있습니다. 실용적이지는 않습니다. (또한 나는 그 중 일부를 시도해 보았지만 iPhone 6 Plus와 같은 특정 장치를 목표로 작업했지만, 800px 미만의 대상을 목표로하는 것이 더 많았습니다.)
이렇게 요약하면, 내 예제 코드가 정확하고 제목 질문에 대한 대답이 단순한 "아니오"이면 망막 장치를 타겟팅 할 때 누락 된 것이 있습니까? 아마도 큰 유적지 문제일까요? (나는이 문제를 찾기 위해 당신에게 요청하지 않습니다. 다른 것이 더 깊게 파고들 것입니다. 그러나 거대한 사이트입니다))
고마워요!
메타 태그가 잘 보이고 CSS가 멋지게 보입니다. retina 전화 또는 iPhone 6 Plus에서 작동하도록 MQ를 수정하지 않아도됩니다. 휴대 기기 시뮬레이터에서 해당 휴대 전화를 선택할 때 Chrome 개발자 도구에서이 문제를 재현 할 수 있습니까? 나는 CSS에 또 다른 문제가 있다고 의심하고, 디버깅이 도움이 될 것이다. –