如何在屏幕從移動設備中的縱向旋轉到橫向視圖時停止移動內容？

Question

當屏幕從縱向視圖旋轉到橫向視圖和反之亦然時，內容在視口中移動。

它只發生在我看到html文檔的中間或結束部分。

you can see the problem hare but try to open it in mobile browser or try using combination ctrl-shift-m on mozilla

我嘗試不同的視口設置，但似乎沒有奏效。

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;,maximum-scale=1, user-scalable=no" name="viewport"> 

還有一件事，如果我們做固定的，那麼它開始正確的方式。但工作圖像的高度，由於其響應性質，我認爲它不是好給圖像一個固定的高度。

請提出您的解決方案。

Answer 1

感謝每一位對我的問題感興趣的人。 我在想這是一個CSS問題或HTML錯誤，但我用小jQuery代碼修復它。 另請參閱working example

  jQuery(function(){ 
      jQuery.miniMenu = new Object(); 
      jQuery.miniMenu.i = new Object(); 

      jQuery(document).on("scroll", function(){ 
       var scroll_position = jQuery(window).scrollTop(); 
       var doc_height = jQuery(document).height(); 
       var w_height = jQuery(window).height(); 
       var b_h = doc_height-w_height; 
       var scroll = (scroll_position/b_h)*100; 
       jQuery.miniMenu.i.globalVar = scroll; 
       console.log("scroll position "+scroll); 
      }); 

      jQuery(window).click(function(){ 
       console.log("new scroll "+jQuery.miniMenu.i.globalVar); 
       var scroll_position = jQuery(window).scrollTop(); 
       var doc_height = jQuery(document).height(); 
       var w_height = jQuery(window).height(); 
       var b_h = doc_height-w_height; 
       var scroll = (scroll_position/b_h)*100; 
       console.log("scroll position "+scroll); 
      }); 

      jQuery(window).on('orientationchange', orientationChangeHandler); 
      console.log("orentation change"); 
      function orientationChangeHandler(e) { 
       setTimeout(function() { 
        var doc_height = jQuery(document).height(); 
        var scroll = jQuery.miniMenu.i.globalVar; 
        var w_height = jQuery(window).height(); 
        var b_h = doc_height-w_height; 
        var scroll_position = (scroll*b_h)/100; 
        scroll_position = Math.round(scroll_position); 
        jQuery('html, body').animate({scrollTop: scroll_position}, "5", function(){ 
         console.log("animation complete"); 
        }); 
        console.log(scroll_position); 
       }, 20); 
      } 
     });