왜이 미디어 쿼리가 내 iPhone에서 작동하지 않습니까?

Question

iPhone 6 및 4를 사용하여 다른 스타일 시트가 적용되고 있는지 확인했습니다. 그렇지 않았습니다. 내 스타일 시트는 다음과 같습니다.

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

예, 간격이 있습니다. 그 공간은 나중에 태블릿을위한 공간입니다. 어떤 이유로 mobileindex.css가 해당 설정에 적용되지 않았습니다. 나는 오리엔테이션을 두 번 바꿔야한다. 그러나이 문제는 다음과 같이 수정됩니다.

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

iPhone 4 및 6의 경우 800px로 충분하지 않습니까? 지금 어떻게 작동합니까? 이 문제가 발생한 페이지는 msolonko.net입니다.

Answer 1

주 스타일 아래에 미디어 쿼리를 추가 한 다음 모바일 장치에서 웹 응용 프로그램을 확인하십시오.

@media screen and (min-width:768px) and (max-width:1024px) { 
    /*Your Mobile Style will be here.*/ 
} 

중요한 것은

는 iPhone6 ​​장치에 대한 잘못된 분 - 폭과 최대 폭을 적용하고 있다는 점이다. 반응 형 디자인을위한 iPhone6의 실제 크기는 다음과 같습니다.

아이폰 6 세로

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /*Your Mobile Style will be here.*/ 
} 

아이폰 6 풍경

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /*Your Mobile Style will be here.*/ 
}