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

【问题标题】：How to stop shifting of content when screen is rotated form portrait to landscape view in mobile devices?如何在移动设备中将屏幕从纵向视图旋转到横向视图时停止内容移动？
【发布时间】：2014-02-07 18:20:55
【问题描述】：

当屏幕从纵向视图旋转到横向视图时，视口中的内容会发生移位，反之亦然。

只有当我看到 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">

还有一件事，如果我们固定图像的高度，那么它就会开始以正确的方式工作。但由于它的响应性，我认为给图像一个固定的高度是不好的。

请提出您的解决方案。

【问题讨论】：

标签： android iphone html css responsive-design

【解决方案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);
            }
        });

【讨论】：