旧浏览器的 JQuery Vh 参数修复

Question

所以我最近一直在 CSS3 中使用 vh 和 vw 单元，并且喜欢它们的工作方式。不幸的是，只有现代版本的浏览器才支持它们，我不得不找到一种解决方法来获得我想要的网站外观。

经过研究，我发现了一个在 JQuery 中制作的另一个线程上的修复，它可以完美地工作，直到对视口的大小进行更改（即调整窗口的比例，或者将移动设备打开其他方式。）当你这样做时，div的高度在页面下方大大增加。如果您能帮我解决这个问题，我将不胜感激。

我正在开发的网站是：http://phantommarketing.co.uk/rapidengineering/index.html

受影响区域的 HTML，带有激活的内嵌 Javascript

<div id="fullscreen_img">
    <img src="images/rapidlogo.svg" alt="Rapid Engineering Logo" id="rapidlogo">
</div><!--END OF FSIMG-->

<script type="text/javascript">
    // Init object
    var supportVhVw = new SupportVhVw();

    // Scale all texts
    supportVhVw.setVh("#fullscreen_img", 100);
</script>

Javascript

function SupportVhVw() {

    this.setVh = function(name, vh) {

        $(window).resize( function(event) {
            scaleVh(name, vh);
        });

        scaleVh(name, vh);
    }

    this.setVw = function(name, vw) {

        $(window).resize( function(event) {
            scaleVw(name, vw);
        });

        scaleVw(name, vw);
    }

    var scaleVw = function(name, vw) {

        var scrWidth = jQuery(document).width();
        var px = (scrWidth * vw) / 100;
        var Fwidth = jQuery(name).css('width', px + "px");
    }


    var scaleVh = function(name, vh) {

        var scrHeight = jQuery(document).height();
        var px = (scrHeight * vh) / 100;
        var Fheight = jQuery(name).css('height', px + "px");
    }
};

Answer 1

取视口高度和宽度，而不是文档高度和宽度

  var scaleVw = function(name, vw) {

                var scrWidth = $(window).width();
                var px = (scrWidth * vw) / 100;
                var fontSize = jQuery(name).css('width', px + "px");
            }


            var scaleVh = function(name, vh) {

                var scrHeight = $(window).height();

                var px = (scrHeight * vh) / 100;
                var fontSize = jQuery(name).css('height', px + "px");
            }

我在 Internet Explorer 8 中测试它工作正常