文本在小窗口中加载太大

Text loads too big in small window

本文关键字：加载 窗口 文本      更新时间：2023-09-26

我正在开发一个使用 jquery 更改任何窗口大小调整字体大小的网站，以将所有内容保留在正确的位置。它工作得很好，但是当某人的浏览器没有最大化时，字体仍然会像最大化一样加载，直到用户调整浏览器的大小。即使我使浏览器比页面加载时小，字体也会调整。这是我的代码：

$(document).ready(function() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    $('.main').height(mainwidth * .8895)
    $('.logo').width(headerwidth * .049);
    $('.logo').height(headerheight * .7533);
    $('.divider').width(headerwidth * .00204);
    $('.design-image').width(headerwidth * .2547);
    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});
    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});

});
$(window).resize(function() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    var headerheight = $('.header-middle').height();
    $('.main').height(mainwidth * .8895);
    $('.logo').width(headerwidth * .049);
    $('.logo').height(headerheight * .7533);
    $('.lady-image').width(headerwidth * .2835);
    $('.divider').width(headerwidth * .00204);
    $('.design-image').width(headerwidth * .2547);
    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});
    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});
});

document.ready 直到页面加载后才会加载吗？任何帮助将不胜感激！

您可以通过非常轻微地更改代码来执行此操作。只需采取 

$(window).resize(function() {

位并将其更改为

$(window).resize(resizeMyStuff)

然后使用调整大小处理程序中的现有代码创建一个新函数。 

function resizeMyStuff() {
var mainwidth = $('.main').width();
var mainheight = $('.main').height(mainwidth * .8895);
var headerwidth = $('.header-middle').width();
var headerheight = ... etc

这样，您可以在 $（document）.ready 函数的末尾调用该函数，从而在每次加载页面时设置大小。

您也可以使用 

var browserWidth = $(window).width();
var browserHeight = $(window).height();

从而不是依赖页面元素（这可能是受到一些奇怪的 CSS 继承或正在发生的事情的影响）中获取窗口大小。

相关文章：