如何在屏幕从移动设备中的纵向旋转到横向视图时停止移动内容？

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); 
      } 
     });