檢測並調整ipad中的視口

Question

我有一個問題。這裏是我的測試網站。 Test Website 問題是，當我在任何一個ipad模擬器，如iPad Peek，或ipraginal，都會出現一個我不想要的垂直滾動條。我希望我的頁面完全適合高度。這本書應該以完整的形式出現，沒有滾動條。任何人都可以幫忙嗎？

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的meta標籤在頁面加載

$(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 + " />"); 
}); 

..這確實很討厭，但它的工作。