0

我对 jQuery 和 JS 有点陌生，我正在尝试使文本大小可调整为移动网站上的屏幕宽度

我在网上搜索答案并想出了这个解决方案

                (function($) {
                $.fn.textfill = function(maxFontSize) {
                    maxFontSize = parseInt(maxFontSize, 10);
                    return this.each(function(){
                        var ourText = $("span", this),
                            parent = ourText.parent(),
                            maxHeight = parent.height(),
                            maxWidth = parent.width(),
                            fontSize = parseInt(ourText.css("fontSize"), 10),
                            multiplier = maxWidth/ourText.width(),
                            newSize = (fontSize*(multiplier-0.1)),
                            textHeight = ourText.height();
                            if(newSize > 35){
                                ourText.css("fontSize",35);
                            }
                            else{
                                ourText.css(
                                    "fontSize", 
                                    (maxFontSize > 0 && newSize > maxFontSize) ? 
                                        maxFontSize : 
                                        newSize
                                );
                            }
                    });
                };
            })(jQuery);


            $(document).ready(function() {
                    $('.jtextfill').textfill({ maxFontPixels: 36 });
            });

但是只有当页面第一次重新加载而不是在窗口调整大小时，所以我将它全部输入到一个函数中并添加

            $(document).ready(function () {
            resizeTextHeb();
            $(window).resize(function() {
                resizeTextHeb();
            });
        });

但现在在 iPhone/iPad/Android 等设备上，它不会在屏幕旋转时重新加载该功能。屏幕旋转不作为窗口调整大小吗？我该怎么做才能让它发挥作用？谢谢。谢谢

4

2 回答 2

1

您可以为此使用媒体查询，而无需使用 js。

于 2012-08-22T14:43:21.880 回答
0

您的函数名称在主要问题上是“resizeTextHeb()”，任何函数名称问题！？我建议您使用 google chrome js 控制台进行错误报告或 FF 浏览器上的错误控制台。，无论如何，如果它确实提醒你，那么主要问题是你的功能，而不是定位方法。

于 2012-08-22T18:37:12.873 回答