Question

我有一个问题。这是我的测试网站。 Test Website 问题是，当我在任何ipad模拟器中查看时，如iPad Peek或oraginal 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 head标签。漂亮而有光泽的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 + " />");
});

..这确实非常讨厌，但它确实有效。

在ipad中检测和调整视口

3 个答案: