ipad에서 뷰포트 감지 및 조정

Question

질문이 있습니다. 여기에 테스트 웹 사이트가 있습니다. Test Website 문제는 내가 iPad Peek 또는 oraginal ipad와 같은 ipad 시뮬레이터를 열면 내가 원하지 않는 수직 스크롤 막대가 나타납니다. 내 페이지가 정확하게 높이에 맞도록하고 싶습니다. 책은 스크롤러가없는 완전한 형태로 나타납니다. 아무도 도와 줄 수 있니?

Answer 1

사용 CSS3 미디어 쿼리는 뷰포트 감지하고 구현하는

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

참조 : 난 그냥 똑같은 문제가 있었다 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Answer 2

var metas = document.getElementsByTagName('meta'); 
var i; 
if (navigator.userAgent.match(/iPhone/i)) { 
    for (i=0; i< metas.length; i++) { 
     if (metas[i].name == "viewport") { 
      metas[i].content = "width=device-width, minimum-scale=0.5, maximum-scale=1.0"; 
     } 
    } 
    document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false); 
} 
function gestureStart() { 
    for (i=0; i<metas.length; i++) { 
     if (metas[i].name == "viewport") { 
      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"; 
     } 
    } 
} 

Answer 3

. 내가 소개 한

<meta name="viewport", content="height=device-height, initial-scale=1.0" /> 

내 html 헤드 태그에. 멋지고 반짝이는 iPad는 뷰포트 높이를 1024px (javascript로 확인)로 설정했습니다. 디스플레이 해상도이므로 주소 표시 줄, 상태 표시 줄 등을 표시해야합니다.

유일한 해결 방법은 다음과 같습니다. 페이지로드시 jquery로 메타 태그를 다시 작성하는 것입니다.

$(document).ready(function(event){ 
    $('head meta[name=viewport]').remove(); 
    var content = "'initial-scale=1.0, height=" + window.innerHeight + "'"; 
    $('head').prepend("<meta name='viewport' content=" + content + " />"); 
}); 

.. 실제로는 매우 불쾌하지만 작동합니다.