3

私は、すべての解像度で完全に表示する必要があるサイトで作業しています。このため、ems、%、および以下のスレッドにあるコードを使用しました。

ブラウザの幅に基づいてテキスト サイズを動的にスケーリングすることは可能ですか?

唯一の問題は、ブラウザ ウィンドウの高さに基づいてフォント サイズが変化しないことです。

このコードを変更してブラウザの高さを取得する方法を知っている人はいますか?幅だけでなく高さにもフォントを調整できますか? (「scaleSource = $body.width()」を「scaleSource = $body.height()」に変更しようとしましたが、何も起こりませんでした...:

 <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="./test_files/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $( document ).ready( function() {
            var $body = $('body'); //Cache this for performance

            var setBodyScale = function() {
                var scaleFactor = 0.35,
                    scaleSource = $body.width(),
                    maxScale = 600,
                    minScale = 200;

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });
    </script>

前もって感謝します！

- 編集

これが解決策です。ALOTのテストの後に見つかりました:) :

<!DOCTYPE html>


    <title>Dynamic text sizing</title>
    <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" charset="utf-8">
        $( document ).ready( function() {
            var $body = $('body'); //Cache this for performance

            var setBodyScale = function() {
                var scaleFactor = 0.55,
                    scaleSource = $(window).height(),
                    maxScale = 600,
                    minScale = 10;

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });
    </script>
4

0 に答える 0