0

だから私は最近、CSS3 内でvhandユニットを使用しており、それらの機能が気に入っています。vw残念ながら、それらはブラウザの最新バージョンでしかサポートされていないため、自分のサイトに必要な外観を得るために回避策を見つける必要がありました.

調査の結果、JQuery で作成された別のスレッドで修正が見つかりました。これは、ビューポートのサイズが変更されるまで (つまり、ウィンドウのサイズが変更されるか、モバイル デバイスの向きが逆になるまで) 完全に機能します。 ）これを行うと、divの高さがページの下に大幅に増加します。この問題を解決するのを手伝ってくれたら、とても感謝しています。

私が取り組んでいるサイトは次のとおりです: http://phantommarketing.co.uk/rapidengineering/index.html

インラインJavascriptを有効にした患部のHTML

<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 に答える