답변을 찾지 못하는 것 같습니다. iPhone 6 또는 6 Plus에 대한 액세스 권한이 없습니다.iPhone 6의 세로 및 가로가 동일한 너비를보고합니까?
이전의 모든 iOS 기기는 가로 모드에 있음을 알고 있더라도 세로 모드에서 기기의 너비로 항상 너비를보고합니다. 우리는 새로운 장치 크기에 대해보다 전문화 된 미디어 쿼리를 작성해야하는지, 아니면 최종적으로 가로 모드에서 정확한 너비를보고 있는지 궁금합니다.
감사합니다.
width 또는
device-width 확인하고 CSS 미디어 쿼리의 측면에서, 내가 주로 부탁 해요를 추가해야
device-width을 768px로보고합니다.특히 iOS와 관련하여 장치 뷰포트의 너비를 결정하는 가장 좋은 방법은 CSS orientation 미디어 쿼리를 사용하는 것입니다. 768px는 이전 iPads 전용입니다. 당신이 당신의 CSS를 원하는 경우
@media only screen
and (min-device-width : 540px)
and (max-device-width : 960px) { /* STYLES GO HERE */}
:
아이폰 6 :
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
아이폰 6 플러스 다음은 각 장치 인스턴스에 사용해야 쿼리의 목록입니다 세로 또는 가로 방향의 컨텍스트에만 적용하려면 orientation 쿼리를 추가해야합니다. 그 특별한 경우에 대해서도 마찬가지입니다.
안녕 Xenyal, 나는 먼저 페이지를 보는 모든 장치의 방향을 얻은 다음 'min-'및'max-width'를 기반으로 미디어 쿼리를 실행하는 스크립트를 가지고 있습니다. 문제는 iOS 기기가 가로 또는 세로로 같은 너비에 놓여 있다는 것입니다. 내 스크립트는 기기에 가장 적합한 배경 이미지를로드하려고하기 때문에 거짓말을하는 오래된 iOS 기기에 대한 특수 쿼리를 이미 가지고 있지만 iPhone 6이 그 전통을 이어가고 있는지 알고 싶습니다. 세로 및 가로 모드에서 동일한 너비 - 또는 제 일반적인 catch-all 쿼리가 작동하는 경우. – LubosB
자바 스크립트에서 @LubosB 스크립트? iPhone 6/6Plus의 경우 방향에 따라 너비가 변경되지 않습니다. 그러므로 이상적인 해결책은'orientation'뿐만 아니라'width'를 포함하는 쿼리를 사용하는 것입니다. – Xenyal
확인해 주셔서 감사합니다. 예, JS, 그래서 아마도 if (orientation == landscape && width
iPhone 6/6 Plus를 시뮬레이션하기 위해 Chrome 개발자 도구를 사용해 보셨나요? – Xenyal
나는 지금 당장 장치 모드를 신뢰하지는 않는다. (내가 겪은 버그에 관해서는 여기에 또 다른 글이있다. – LubosB
후속 작업을 수행하기 위해 3 세대 iPad가 있고 http://quirksmode.org/m/tests/widthtest.html에서 화면 크기 테스트를 열면 980px와 동일한 너비가 양쪽 모두에서보고됩니다. 초상화와 풍경. 장치 모드에서이를 에뮬레이션하고 동일한 페이지로 이동하면 다른 값을 얻게됩니다 (완벽한 세계에서 정확해야 함). 하지만 의심 스럽지만 실제로 내 장치에서 실제로 얻는 것을 모방하지는 않습니다. – LubosB