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

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

1 个答案: