0

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

经过研究，我发现在 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");
    }
};
4

1 回答 1

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 中测试它工作正常

于 2015-04-11T19:36:23.610 回答