Mediaquery가 iPhone에서 작동하지 않습니다.

Question

일부 미디어 쿼리가있는 템플릿으로 웹 사이트를 구축하고 있습니다. 가장 낮은 최대 너비는 479이며, 맞으면 아이폰에는 맞지 않습니다 (만약 그렇다면 작동하지 않습니다).

테스트 할 수있는 iPhone 만 있으므로 시간이 많이 걸리기 때문에 브라우저 크기를 조정하여 iPhone 화면을 시뮬레이트 할 수 없습니다.

iPhone 지원이있는 다른 템플릿을 살펴보면, 나는 거기에서 미디어 쿼리를 가져 왔지만 작동하지 않습니다.

내가 추가 한 코드 :

@media (max-width: 359px) { 
    .smaller{ 
     font-size: 10px;  
    } 
} 

이 잘 작동해야합니까?

올바른 미디어 쿼리를 아는 사람이 있습니까? iPhone을 사용하지 않고 iPhone 반응 형 버전을 테스트 할 수있는 무언가가 있습니까?

감사합니다.

Answer 1

문제 대상 표시 영역을 참조하는 "최대 폭"입니다.

"min-device-width"/ "max-device-width"대신 장치의 렌더링 영역을 사용해야합니다. 실제 장치를 사용하지 않고 테스트 아이폰 특정 스타일에 관한

- 여기 당신이 체크 아웃 할 수있는 몇 가지 브라우저 기반의 예는 다음과 같습니다

• 구글 크롬 개발자 도구 장치 모드 (https://developer.chrome.com/devtools/docs/device-mode)
• 파이어 폭스 응답 디자인 보기 (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View)

Answer 2

이렇게하는 방법에는 여러 가지가 있습니다. 아래 링크를 클릭하면 iPhone에 대한 미디어 쿼리를 작성할 수 있습니다. 미디어 쿼리

는

http://stephen.io/mediaqueries/

iPhone 5 Media Queries 

iPhone 5 in portrait & landscape 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */} 

iPhone 5 in landscape 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

iPhone 5 in portrait 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }