在我正在開發的Web應用程序中，我嘗試了iOS 7.1的新minimal-ui功能（請參閱safari fullscreen in iOS 7.1 with minimal-ui meta tag），但我發現一個問題，當我從肖像切換到風景時，底部會出現84像素高的灰色區域。另外，切換到橫向後，document.body.scrollTop更改爲64。當使用iOS 7.1從縱向切換到橫向時，可見的灰色區域minimal-ui
您可以看到使用this "Hello World" web app問題：http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html
當我在移動Safari瀏覽器加載應用程序在iOS 7.1 iPhone的Retina模擬器，一切都在縱向模式下的罰款。然而，切換到風景，灰色區域立即出現。
什麼是解決此問題的好方法？
我試了一會兒才解決這個問題，但沒有運氣。我終於決定做一個測試，我在哪裏：
minimal-ui元標記。經過測試，問題仍然存在。
我可以想出的唯一結論是，這是IOS 7.1中的一個錯誤，所以我向蘋果公司提交了一個錯誤報告。據報道爲BUG＃：16335579。
請注意Mr. kraftwer1's solution爲我工作（這是一個黑客，但將不得不這樣做，直到Apple修復此問題）。也就是說，在orientationChange之後加入... window.scrollTo(0, 0);的作品。
最後，我只想提一提，向Apple提交有關此問題的其他錯誤報告將會提高它在隊列中的優先級。
我正在讀這篇文章試圖避免同樣的問題，發現了另一種方式來做到這一點。
首先，讓我們發現，如果設備旋轉（此外，如果是縱向還是橫向，我們以後可以檢測），這樣做，我要建立一個變種從JS檢查mediaqueries：
var mql = window.matchMedia("(orientation: portrait)");
然後我們可以聽到，如果有任何變化，改寫視：
mql.addListener(function(m) {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // No matter if is landscape or portrait
});
或者，我們可以更加具體，並觸發東西橫向/縱向不同
mql.addListener(function(m) {
if(m.matches) {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // Portrait
}
else {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.0"); // Landscape
}
});
我希望這可以幫助你！
到目前爲止，這個問題確實似乎是iOS 7.0和7.1中的一個錯誤。在風景中使用設備時，我只能重現它。
它發生在三種情況下，我知道，並在所有情況下，window.scrollTo(0, 0)黑客解決它。
將設備旋轉到橫向時。可以通過以下方式解決：
$(window).on('orientationchange', function() {
window.scrollTo(0, 0);
});
從文檔底部拖動時。通過處理scroll事件解析：
$(window).on('scroll', function() {
var focusedElement;
if ($(document).scrollTop() !== 0) {
focusedElement = $(':focus');
if (!(focusedElement.is('input') || focusedElement.is('textarea'))) window.scrollTo(0, 0);
}
});
對於關注要素的例外是必要的，因爲屏幕鍵盤打開時，它也將觸發窗口滾動事件。
當關閉鍵盤，然後，所有的元素失去焦點：
formLayer.on('blur', 'input, textarea', function() {
if (!$(':focus').length) window.scrollTo(0, 0);
});
由於這一問題只有到iOS 7.0和7.1版有關，最好是這個黑客限制以下表達：
var buggyIOS = /\b(?:iPhone|iPod|iPad).*?\bOS 7_[01]/.test(window.navigator.userAgent);
我發現的最佳修復方法是Alexander Koleda的here。
window.addEventListener('scroll', function() {
if (document.activeElement === document.body && window.scrollY > 0) {
document.body.scrollTop = 0;
}
}, true);
這也修復了當您滾動到底部時的灰色條。
這完全是越野車，每當用戶嘗試用他的手指滾動時，滾動頂部。 –
煉就了window.scrollTo(0,0)解決方案，我封裝在一個自我描述立即調用的函數表達式並執行文件準備和窗口大小調整：
(function minimalUiFix() {
var fix = function() {
window.scrollTo(0,0);
};
$(fix);
$(window).on('resize.minimal-ui-fix', fix);
})();
的好處是，所有相關的工作代碼周圍封裝在一起並在功能名稱中描述瞭解決此問題的原因。這可以保護我美麗的代碼的其餘部分免受陌生工作的影響（太多）。
有很多事情要做，但我在這個jsbin中使用它。
這個伎倆似乎並沒有爲我做伎倆。看看這jsbin。我在這裏的內容非常簡單：隱藏溢出的固定位置容器應占據整個屏幕。滾動不應該是可能的，但是，我仍然得到一些意想不到的可滾動空間。所有這些技巧都會回滾到頂端。它並沒有消除造成真正問題的神祕額外空間。
但是，除了準備好和調整大小之外，在滾動上應用修正似乎最接近我能找到的體面工作。
(function minimalUiFix() {
var fix = function() { window.scrollTo(0,0); };
$(fix);
$(window).on('resize.minimal-ui-fix', fix);
$(window).on('scroll.minimal-ui-fix', fix);
})();
我認爲這是最好的，我們可以希望，直到蘋果修復移動Safari或其他工作被發現。
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no">
只要刪除最小的用戶界面，爲我擺脫它。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
你能附上截圖嗎？我想我可能會遇到同樣的問題，但我想確認一下。 – Stoutie
是[this]（https://www.dropbox.com/s/fdb4msspr3vqcwq/minimal-ui_landscape.png?dl=0）它是什麼樣子？從我的[jsbin]（http://jsbin.com/vopeq/107）截圖。 – Stoutie
@stoutie：是的，就是這樣。 –