android - 在移动设备中屏幕从纵向 View 旋转到横向 View 时如何停止内容移动？

Question

当屏幕从纵向 View 旋转到横向 View 时，内容在视口(viewport)中发生位移，反之亦然。

只有当我看到 html 文档的中间或结尾部分时才会发生。

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

我尝试了不同的视口(viewport)设置，但似乎没有任何效果。

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