我正在使用CSS媒體查詢創建具有響應式設計的網站。當我以橫向或縱向方式在iPad上打開我的測試頁時，它看起來很好。當將iPad從風景轉向肖像時，頁面向左移動

但是，當我從橫向切換到縱向模式時，頁面會向左移動。我可以告訴正確的CSS正在加載，因爲頁面上的其他內容發生了變化。我也可以將頁面拖到右側，看起來和我最初打開頁面時的頁面完全一樣。

我已我的視口設置爲：元ID =「視圖」名稱=「視口」內容=「寬度=設備寬度，初始規模= 1.0，最小刻度= 1.0」

我加JavaScript修復iOS視口縮放問題，該問題用於在從縱向切換到橫向時導致頁面放大。（我用這裏描述的解決方案：https://gist.github.com/901295）

我遇到問題時找到我從橫向切換到肖像時遇到的錯誤的名稱。有沒有其他人看過這個或知道如何解決？

2011-10-13 Jessica White Ralston

張貼的頁面或CSS ... –

有效地重複[什麼是重新呈現方向更改網頁的最佳方法？]（http://stackoverflow.com/questions/7919172/what-is - 最好的方法 - 重新呈現 - 一個Web頁面的方向 - 變化） - 相同的基礎。 –

我設法排除我的類似問題 - 也許這會適合你嗎？

您需要弄清楚它是否是一個特定的div或其他元素，通過刪除/恢復不同的位並重新測試頁面導致它。一旦你完成了，試着在你的CSS中添加一個overflow: hidden屬性到那個元素 - 我使用overflow-x: hidden，因爲我的問題是水平滾動，但你可能需要改變它。

希望這是有用的...祝你好運！

來源

2011-11-29 02:22:53 ellawson

-2

嘗試添加以下設置到您的內容屬性：maximum-scale=1

或試試這個：user-scalable=no

here is the ios documentation

來源

2011-12-05 11:57:27 andrej

這不起作用。見[我的答案]（http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325）進行演示。 –

問題老闆說，她「還可以拖動頁面右邊，它看起來和我最初在肖像中打開頁面的效果完全一樣。「
這讓我覺得，出於某種未知的原因（一個bug？），頁面向左滾動的方向更改爲縱向模式（否則您將無法將其拖回）。

我也有類似的問題，有以下的JavaScript的解決方法解決它：

// ... 
// Optionally add a conditional here to check whether we are in Mobile Safari. 
// ... 
window.addEventListener('orientationchange', function() { 
    if (window.orientation == 0 || window.orientation == 180) { 
     // Reset scroll position if in portrait mode. 
     window.scrollTo(0, 0); 
    } 
}, false);

也許這會爲別人打工了。

來源

2012-08-07 14:24:28 Jeroen

Jereon，你的JavaScript爲我工作。我的觀點是：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,   minimum-scale=1, user-scalable=no" />

我正在使用Drupal Corporate Clean響應主題。使用Omega響應式主題框架我沒有遇到這個問題。

來源

2012-12-12 23:56:43

這不起作用。見[我的答案]（http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325）進行演示。 –

對此的解決方案是所提議的@ellawson

問題是由某些元件沒有被旋轉設備在由所述瀏覽器正確縮放引起的。找到該元素並應用溢出：隱藏;或者他說的overflow-x: hidden;。

來源

2013-06-26 11:26:00 Grantzau

-1

我遇到了這個問題與iPad和應用html { overflow-x:hidden; }。這似乎解決了這個問題。

來源

2014-08-08 20:06:45 NinoLopezWeb

注意：這個問題是duplicate。我會在這裏發表我的答案。

2015更新

不幸的是，過時或誤導了所有其他答案。以下是工作原理：

window.addEventListener('orientationchange', function() { 
 
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display'); 
 
    document.body.style.display='none'; 
 
    setTimeout(function() { 
 
     document.body.style.display = originalBodyStyle; 
 
    }, 10); 
 
    });

代碼監聽orientationchange event，迫使body元素的重新流通過隱藏它，並將其顯示10毫秒之後。它不依賴任何<meta>標籤或媒體查詢。

你說，

當我在橫向或縱向打開我的測試頁在iPad上，它看起來不錯。但是，從橫向切換到縱向模式時，頁面向左移動

這是關鍵。你只需要強制重畫一下body。

從Safari 7開始，建議添加<meta name="viewport" content="width=device-width, initial-scale=1.0">或其變體的答案不再重複。這裏有一個demo。爲了確保您看到它無法正常工作，請在橫向模式下啓動iPad，加載頁面，然後旋轉。請注意，儘管完全使用Flexbox，頁面仍不會展開爲全高。

將其與this page進行比較，我們在生產中使用隱藏/顯示主體技術。

來源

2015-07-11 12:55:42

感謝您的支持。我遇到了響應式html表格腳本和手風琴問題。這個腳本解決了這個問題。 +1 – Progrower

當將iPad從風景轉向肖像時，頁面向左移動

回答

2015更新

相關問題