动态缩放字体大小到高度

发布于 2024-12-21 03:22:15 字数 2931 浏览 6 评论 0原文

我正在处理一个需要在所有分辨率下都能完美查看的网站。因此，我使用了 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>

提前致谢！

--编辑

这里解决方案，经过大量测试后找到了:)：

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

原文

I am working with a site that requires perfect viewing in all resolutions. Because of this I have used ems, % and the code found in the thread below:

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

Only problem now is that the font-size doesn't change based on the height of the browser window.

Does anyone know how to change this code to get the height of the browser so I can make to font adjust not only to width but also to height? (I tried to change the "scaleSource = $body.width()," to "scaleSource = $body.height()," but it didnt make anything happen... :

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

Thanks in advance!

-- EDIT

here´s the solution, found it after ALOT of testing :) :

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

分享到QQ

分享到微博