Javascript 小窗口中的文本加载过大

我在一个网站上工作，该网站使用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) 

然后使用resize处理程序中的现有代码创建一个新函数

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继承或其他因素的影响）中选择窗口大小。

使用jQuery而不仅仅是媒体查询有什么具体原因吗？这需要很多额外的JS，只需CSS就可以处理。看起来OP的响应性要比典型的媒体查询提供的响应性好得多。要执行OP显示的操作，您需要为每个可能的浏览器像素宽度设置一个媒体查询断点