2011-01-11 8 views
3

iPad 용 웹 앱을 제작하고 있습니다. 현재 사이트 최적화를 위해 페이지 폭을 &으로 설정하려고합니다.iOS 뷰포트 설정

내가 얻으려고하는 것은 웹 앱이 가로 및 세로 모드 모두에서 사용자 배율없이 그리고 콘텐츠 왼쪽 및 오른쪽의 빈 영역없이 전체 화면을 차지하도록하는 것입니다.

나는 이것을 달성 할 수

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 

max-width:1024px; 
min-width:768px; 

문제 다음, 가변 폭 내 CSS의 모든 코딩된다. 페이지 요소의 너비를 올바르게 코딩 할 수 있도록 단일 CSS 너비를 갖는 것이 좋습니다.

그래서 CSS를 단일 너비로 설정하면 바로 뷰포트 설정을 가져올 수 없습니다! 이 설정으로 세로로 페이지를 열면 :

<meta name="viewport" content="width=device-width,user-scalable=no" /> 

모두 정상적으로 작동합니다. 기기를 가로 방향으로 돌리면 다시 좋았습니다. 초상화로 돌아 오면 내가 문제가있는 곳입니다. 페이지가 뷰포트에 비해 너무 큽니다. 나는 장치의 너비에 맞추기를 원한다.

정말 쉽습니다. 내가 놓친 게 있니? 사실 xcode 함께 제공되는 iOS 시뮬레이터에서 테스트하는 iPad (v2를 보유)가 없습니다. 이 아니어야합니다!

나는 을 사용해 왔습니다.

답변

1

이것이 도움이되는지는 확실치 않지만 회전을 감지하고 작업을 수행 할 수있는 방법이 있습니다. 페이지를 다시 렌더링하거나 배율을 확인하도록 강요합니다. 그러나 지금까지 iPad에서이 문제를 발견하지 못했습니다. 기기에서 테스트 할 수있는 페이지가 있습니까?

<body onorientationchange = "updateView();"> 

<script> 
    function updateView() 
    { 
     switch (window.orientation) 
     { 
      case 0: // Portrait 
       break; 
      case 90: ; // Landscape 
       break; 
      case -90: ; // Landscape counterclockwise 
       break; 
     } 
    } 
</script> 
+0

세로 방향의 iOS 기기의 "거꾸로 된"(홈 버튼 위로) iOS 기기는 내 경험상 '180'이라는 보고서를 작성하므로이 케이스를 추가 할 수 있습니다. –