Advertisement

Why doesn't this font-size resize function work correctly?

Started by February 17, 2023 02:13 PM
2 comments, last by Officer_Erik_K 1 year, 10 months ago

I have this code:

function resizePage() {
    var screenHeight = window.screen.height;
    var screenWidth = window.screen.width;
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    var dbsFS = Math.round(100*(20*((docHeight+docWidth)/((screenHeight-(120))+screenWidth))))/100;
    document.body.style.fontSize = dbsFS+"px";
    alert("Height: "+((screenHeight-120)-docHeight)+" Width: "+docWidth+" Font Size: "+dbsFS);
}
resizePage();
$(window).resize(function() {resizePage();});

It doesn't work correctly, but it should, whenever I resize the window, instead of the text getting smaller, it gets bigger, but it works as intended when you refresh the page, it doesn't make sense.

So here is a gif of what it's doing:

A gif of what the function previously stated is doing.

As you can see, when I resize the window instead of changing the font size to match the viewport it just makes the font size bigger, but when I refresh the page it goes to what the font size should be at, I don't know why it is doing this. Can anyone help me understand what is happening and how to fix it? I am stumped.

– Erik P. Kountzman - Owner - of - Airent Animation Entertainment --

Increasing the font size increases the size of the document and increasing the size of the document increases the size of the font.

Advertisement

@a light breeze This slightly helped, as I have just realized what the problem was,

var docHeight = $(document).height();
var docWidth = $(document).width();

it was with these two functions, all I had to do to make it work the way that I wanted was by changing the document's to window so that it wasn't the size of the document being looked at, but the actual window itself.

I also I want to state that the font size is dependent on the window size, as the window gets bigger the font size should also get bigger and as the window gets smaller the font size should also get smaller.

It is a rather simple equation that is being used, Math.round(100*(20*((docHeight+docWidth)/((screenHeight-(120))+screenWidth))))/100, where docHeight is the height of the window, docWidth is the width of the window, screenHeight is the height of the screen, and screenWidth is the width of the screen, so ((screenHeight-(120))+screenWidth) should remain the same, while (docHeight+docWidth) changes when the window resizes.

– Erik P. Kountzman - Owner - of - Airent Animation Entertainment --

This topic is closed to new replies.

Advertisement