2013-05-02 3 views
1

960 픽셀 너비보다 작은 모든 스크린에 적용하고 싶은 규칙이 있습니다. 명백한 CSS 미디어 쿼리 max-width 및 ipad

했다 :

@media only screen and (max-width : 959px)

그러나이 세로 모드에서 아이 패드와 함께 실패합니다. iPad가 너비와 높이를 방향에 상관없이 동일하게보고합니다.

iPad (또는 iPad와 동일한 로직을 사용하는 다른 장치)가 실제 너비를 보도록하는 표준 방법이 있습니까?

분명히 "iPad 관련"규칙이나 방향 쿼리를 피하기를 원합니다.이 쿼리는 960 픽셀 미만의 모든 화면에 적용해야합니다.

감사합니다.

답변

0

대신 @media only screen and (max-device-width : 1024px)을 사용해보세요. 그것은 풍경이나 초상화의 iPad를 커버해야합니다.

iPad는 방향에 관계없이 너비와 높이가 같은 것으로보고했습니다.

이것은 까다 롭습니다. iPad는 방향에 관계없이 동일한 max-device-width를보고합니다. 그러나 다른 방향/너비에서 다른 max-width을 올바르게 존중합니다. 장치가 변경되지 않는 부분입니다.

희망이 도움이됩니다.

+0

답장을 보내 주셔서 감사합니다. 나는 아이 패드를 특별히 목표로하고 싶지 않다. 나는 장치에 상관없이 제공된 규칙을 사용하기 위해 960 미만의 뷰포트를 원한다. 따라서 iPad (또는 다른 장치)가 세로로 960 개 미만인 경우 제공되는 규칙을 준수해야합니다 (iPad는 특히 보이지 않음). (가로 방향으로 인해서 방향이 정해지지 않기 때문에) 더 넓어진다면, 그렇게해서는 안됩니다. 현재는 마치 960 미만인 것처럼 작동합니다. 가로 모드에서는 기대하지 않습니다. 어떤 아이디어? – momo

+0

지각 회신에 죄송합니다. 뷰포트에 대한 James Holderness의 anwser는 분명히해야 할 일이고 완전히 잊어 버린 것입니다. 뷰포트 효과를 잘 요약하면 [this] (http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard#answer-9049670) 답변에서 확인할 수 있습니다. 나는 빠른 [codepen] (http://codepen.io/asimpson/pen/sJeoE)을 작성하여 동작을보고 원하는 결과를 얻을 수 있도록 수정할 수 있습니다. 본질적으로 iPad 너비는 항상 뷰포트 메타 태그가 설정된 960 픽셀 미만입니다. 희망이 도움이됩니다. 후속 조치에 대한 감사합니다. –

+0

. 원래 뷰포트 메타 세트가있었습니다. 당신이 말했듯이, iPad는 항상 960 미만의 너비를보고합니다. 이는 사실이 아닙니다. 가로 모드 인 경우 너비가 그보다 넓으므로 규칙을 수용해야합니다. 다시 말하지만, iPad를 구체적으로 타겟팅하지는 않습니다. 단지 "적절하게"행동하고 올바른 너비를보고 싶습니다 (기기, 방향 등과 상관없이). 나는 진실만을 원합니다!) – momo