CSS 아이 패드보기 레이아웃

있어 샘플은 여기 설정 : http://codepen.io/rctneil/pen/myxDc 및 전체 페이지 샘플에서 : 그 샘플에 http://codepen.io/rctneil/full/myxDc CSS 아이 패드보기 레이아웃

, 나는 그것을 내에서 .container와 헤더가, 헤더에 고정되어 전체 폭과 .container입니다 특정 폭.

너비를 980 픽셀 이하로 설정하면 iPad에서 페이지가 멋지게 렌더링됩니다. 너비를 980 픽셀보다 크게 설정하면 오른쪽에 잘못된 공간이 생기기 시작합니다.

iPad의 기본 레이아웃 모드는 요소가 시각적 인 뷰포트보다 넓은 경우 시각적 인 뷰포트가 모든 기능이 구현 될 때까지 축소 한 다음 사용자가 페이지의 일부를 수동으로 확대 할 수 있도록한다는 것입니다. 이것이 나를 위해 과거에 어떻게 작용했는지, 나는 확신합니다.

사이트가 자동으로 올바르게 축소되지 않는 이유를 아는 사람이 있습니까?

출처

2012-08-02 rctneil

http://stackoverflow.com/questions/11306973/ipad-zoom-to-fit-doesnt-work-on-webpage-with-minimal-content의 두 번째 대답은 문제를 해결할 것입니다. – Hbcdev

페이지의 높이를 세로 스크롤이 필요할 정도로 크게 설정하면 자동으로 너비가 축소됩니다. 예를 들어 .container에서 너비와 높이를 2000px로 설정하면 페이지가 적절히 축소됩니다. 이것은 아마도이 상황에서 실행 가능한 해결책은 아니지만 iPad 뷰포트 동작에 대한 흥미로운 관찰입니다.

iOS 메타 뷰포트 태그를 사용하는 것이 좋습니다. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

출처

2012-08-02 18:00:01 Jason

정말 이상합니다. 나는 왜 그것이 수직 높이가 아주 크지 않을 때 축소하지 않는지 궁금해한다. 그것은 기대했던 것이고 실제로 원하는 행동이다. 너비 = 장치 너비를 유지하고 싶지만 그렇게 행동하고 싶습니다. 특정 너비를 설정하고 브라우저 스니핑을해야하는 경우 지저분하고 잘못 생각합니다. – rctneil

CSS 아이 패드보기 레이아웃

답변

관련 문제