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中测试过它运行良好

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

1 个答案: