jquery - 在 Div / iframe 内缩放文本大小

Question

我正在整理一个网站，其中一页是一本书。

我有一个内容 div，它以页纸为背景。在这里面我有一个 iframe 来拉出不同的文本页面。我已将 div 的宽度和高度设置为 %，但是我遇到了文本大小问题。由于书籍的性质，内容必须非常静态，但同时必须缩放以匹配屏幕尺寸。

我尝试过使用 jQuery，但无法成功。将不胜感激有关如何使用 jQuery 缩放文本的任何提示，或者是否有人对如何显示一本书有一个全面的更好的想法。

Answer 1

我知道这不是一个 jQuery 解决方案，但是您是否考虑过使用 CSS 媒体查询？

http://css-tricks.com/css-media-queries/

.somediv { font-size: 100%; }

@media all and (max-width: 500px) {
    .somediv { font-size: 80%; }
}

@media all and (max-width: 800px) and (min-width: 501px) {
    .somediv { font-size: 90%; }
}

这将根据当前宽度更改字体大小，并且对于较小的分辨率会降低字体大小。低于 500 像素？80%。在 800 到 501 像素之间？90%。否则标准 100%。

不确定这是否适用于iframes 但值得一试。

Answer 2

正如 Brbcoding 所评论的，您应该看看fittext库。我以前用过它，它很棒，试一试;)。

Answer 3

我在响应式 Web 布局中调整文本大小的这个 jQuery 函数，不知道它是否是你要找的。

$(document).ready(function(){
function scale_text(body, scaleFactor, maxScale, minScale) {
    var scaleSource = body.width();

    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 + '%');
    }

function window_resize() {
    scale_text($('#intromsg'), 1, 500, 150); // example re sizing element
     scale_text($('#introsub'), 5, 150, 100); // example re sizing element

    }


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

//Fire it when the page first loads:
window_resize();

});