고정 너비 웹 사이트를 iPad 뷰포트로 축척하는 방법

Question

iPad의 뷰포트에 2560px 크기의 웹 사이트를 넣을 수 있어야합니다. 현재 나는

@viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 
@-ms-viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 
@-o-viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 

입니다.이 크기는 iPad의 뷰포트로 조정되지만, 나머지 페이지는 수평으로 스크롤해야합니다.

내가해야할 일은 뷰포트 내부의 웹 사이트를 확장해야 나머지 페이지를 볼 수 있도록 스크롤 할 필요가 없습니다. 뷰포트에 공간이 남았음에도 괜찮습니다. 그러나 뷰포트를 과도하게 확장 할 수는 없습니다.

iPad의 뷰포트에 맞게 1460px 웹 사이트로 2560px 크기를 조절할 수있는 사람은 누구입니까? 이 웹 사이트의 크기는 2560x1440xx 모니터에 맞추어 져서 트레이드 쇼 키오스크로 사용되었습니다.

미리 도움을 주셔서 감사합니다!

편집 : 나는 내 CSS의 @viewport 업데이트되었습니다

: 내 현재 구성

@viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-ms-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-o-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-webkit-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-moz-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 

유일한 문제입니다 내 뷰포트에 대한 50-100px 페이지 runover의가 있습니다. 그래서 나머지 웹 페이지를 보려면 오른쪽으로 스크롤해야합니다. 뷰포트와 웹 페이지 사이에 공간이 있더라도 전체 웹 페이지를 뷰포트에 넣을 수 있어야합니다.

너비는 모두 절대 위치 지정으로 수정할 수 없습니다.

업데이트 :

나는 내 문제에 대한 해결책을 발견했다. 분명히 iPad는 내 @viewport 값을 가져 가지 않았기 때문에 x 코드와 테스트 태그를 다운로드했습니다. 웹 페이지의 하단에 약간의 간격 (iPad에서 4 : 3의 종횡비를 유지하기 위해)을 제외하고, 이제 웹 페이지는 iPad의 뷰포트에 잘 맞습니다.

<meta name="viewport" content="width=2560, height=1440, initial-scale=.40, user-scalable=no"> 

Answer 1

당신은 예를 들어, 다음 원하는 크기로 메타 뷰포트를 설정해야합니다 :

<meta name="viewport" content="width=2560,height=1440, initial-scale=1"> 

그러나 Google은 고정 뷰포트가 나쁜 방법이라고 말했고 ' device-width '를 입력하면 웹 사이트가 응답하게됩니다.

information about web master tools update

Answer 2

하는 대신 width: 100%;을하고 시도 width: device-width;

예 :

@viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
} 
@-ms-viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
} 
@-o-viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
}