JQuery 针对旧版浏览器的 Vh 参数修复

Question

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

经过研究，我在 JQuery 中找到了另一个线程的修复程序，在更改视口大小（即 windows调整大小，或将移动设备转向另一个方向。）当您这样做时，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 中测试它工作正常

JQuery 针对旧版浏览器的 Vh 参数修复

JQuery Vh parameter fix for older browsers

jquery

viewport

viewport-units