How do I make auto fontSize in Javascript?

Question

I was trying to use the same function of fontSize() in mobile view to make it responsive but I don't know to do it. This is what I'm using in window view

document.getElementById('hakdog').onload = function () {func()};

function func() {
var str = document.getElementById("voter").innerHTML;
var a = str.length;

if(a >= 40) {
    voter.style.fontSize = "18px";
} else if(a >=30) {
    voter.style.fontSize = "22px";
} else {
    voter.style.fontSize = "27px";
}
}

Is there any same function for mobile view? I only know some function but I know its not responsive

$(document).ready(function(){
if($(window).width() < 480) { 
     $('h1').css('font-size','10px');
     $('h2').css('font-size','8px');
     $('h3').css('font-size','6px');
     $('h4').css('font-size','4px');
}
});

EDIT

I was trying to make it responsive using java just like on the first code I given, normal .css is not gonna work since its only going to give for h1, h2, h3, etc. I was pointing out that I wanted to make the responsive if the full name reached 40 letters then the fontSize would be 18px same with other functions given

EDIT 5:30pm MARCH 29

This is what I tried so far but didn't work as what I expected.

document.getElementById('hakdog').onload = function () {func()};
function func() {
$(document).ready(function() {
    function resizes() {
        if($(window).width() < 480) {
            var str = document.getElementById("voter").innerHTML;
            var a = str.length;

            if(a >= 40) {
                voter.style.fontSize = "9px";
            } else if(a >=30) {
                voter.style.fontSize = "10px";
            } else {
                voter.style.fontSize = "15px";
            }
        }
    }

    resizes();
    $(window).resize(resizes);
  
})
}

Does this answer your question? [Responsive font size in CSS](https://stackoverflow.com/questions/15649244/responsive-font-size-in-css) — evolutionxbox, Mar 29 '22 at 08:30
Hmm not recommended since I was using an automatic fontSize changer if the name reached its limit — 新Acesyyy, Mar 29 '22 at 08:31
You can consider to use em instead of px if you want a more reactive size. — Saver, Mar 29 '22 at 08:35
So are you getting a problem in only mobile view ? or you are asking in-general for how to auto-resize fonts based on the length of content? — innocent, Mar 29 '22 at 08:36
@innocent, yes im only getting a problem in mobile view only, to make it responsive based on the length of the name — 新Acesyyy, Mar 29 '22 at 08:39

innocent · Answer 1 · 2022-03-29T10:08:00.677

0

Edit: Made changes to include the font size based on the length of the content.

This should work. You can check this out on the full page in the below code snippet.

$(document).ready(function() {
  function resizeMe() {
    if ($(window).width() < 480) {
      if ($("#name").text().length < 5) {
        $('h1').css('font-size', '46px');
      } else {
        $('h1').css('font-size', '10px');
      }
      $('h2').css('font-size', '8px');
      $('h3').css('font-size', '6px');
      $('h4').css('font-size', '4px');
    } else {
      $('h1').css('font-size', '20px');
      $('h2').css('font-size', '18px');
      $('h3').css('font-size', '16px');
      $('h4').css('font-size', '14px');

    }
  }

  resizeMe();
  $(window).resize(resizeMe);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="name">Helo</h1>
<h2>Yes</h2>
<h3>Nooooooooooooooooooooooooooo</h3>
<h4>okkkkkk</h4>

edited Mar 29 '22 at 10:08

answered Mar 29 '22 at 09:12

innocent

864
6
17

Sorry but this is not what i wanted to do in js, Since I said that I need to change the `fontSize` depending on length content – 新Acesyyy Mar 29 '22 at 09:29
You can add the length of the content inside the if block and based on it the size it will get set – innocent Mar 29 '22 at 09:31
This is what i tried, i will edit my post – 新Acesyyy Mar 29 '22 at 09:31
Because im not using any `h1, h6` I only use `paragraph` with `classes` so its not really accurate your answer to my question. – 新Acesyyy Mar 29 '22 at 09:34
hmm ok, you can add the paragraphs or apply the following to classes I will remove this or edit it to change based on the length of the characters – innocent Mar 29 '22 at 09:37
Edit will be okay, no need for deletion for others – 新Acesyyy Mar 29 '22 at 09:38
@新Acesyyy I added the change I was telling. If you want a more dynamic approach. Also, I would recommend using CSS As that would be more efficient and easy to do (for eg, You can add the classes based on the content length). Also, You can checkout this answer https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – innocent Mar 29 '22 at 10:11

score 0 · Answer 2 · answered Mar 29 '22 at 10:13

0

Do you try to change 'px' to 'rem', 'rem' resize in relation to the size of the screen.

answered Mar 29 '22 at 10:13

OmOursPor

14
2

score 0 · Accepted Answer · answered Mar 30 '22 at 03:24

This is what i meant for auto sizing for every device

var wid = $(window).width();

if(wid < 320) {
var str = document.getElementById("voter").innerHTML
var a = str.length;

if(a >= 40) {
    voter.style.fontSize = "9px";
} else if(a >= 25) {
    voter.style.fontSize = "11px";
} else {
    voter.style.fontSize = "15px";
}
}

Thanks for everyone commented out!

How do I make auto fontSize in Javascript?

3 Answers3