检测和调整 ipad 中的视口答案

【问题标题】：Detecting and adjusting the viewport in ipad检测和调整 ipad 中的视口
【发布时间】：2011-12-04 11:02:42
【问题描述】：

我有一个问题。这是我的测试网站。 Test Website 问题是，当我在任何 ipad 模拟器（如iPad Peek 或原始 ipad）中查看时，会出现我不想要的垂直滚动条。我希望我的页面完全适合高度。这本书应以完整形式出现，没有卷轴。有人可以帮忙吗？

【问题讨论】：

标签： css ipad safari viewport ios-simulator

【解决方案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

【讨论】：

这仍然不能解决我的问题。高度还是一样的。
请告诉我，如果我在 apple safari 中打开用户代理到 ipad 并复制字符串，它真的像原始 ipad 一样吗？

【解决方案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";
        }
    }
}

【讨论】：

【解决方案3】：

我刚刚遇到了同样的问题。我已经介绍了

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

进入我的 html 头标签。漂亮而闪亮的 iPad 只是将它的视口高度设置为 1024 像素（使用 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 + " />");
});

.. 这确实很讨厌，但确实有效。

【讨论】：