Question

我正在使用一个需要在所有分辨率下完美查看的网站。因此我使用了ems，％和下面帖子中的代码：

Is it possible to dynamically scale text size based on browser width?

现在唯一的问题是字体大小不会根据浏览器窗口的高度而改变。

有谁知道如何更改此代码以获得浏览器的高度，以便我可以使字体不仅调整宽度而且调整到高度？（我试图将“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>

提前致谢！

- 编辑

这是解决方案，经过大量测试后发现:)：

<!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>

将字体大小动态缩放到高度

0 个答案: