Estaba tratando de usar la misma función de fontSize() en la vista móvil para que responda, pero no sé cómo hacerlo. Esto es lo que estoy usando en la vista de ventana
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"; } }¿Hay alguna función similar para la vista móvil? Solo conozco alguna función, pero sé que no responde.
$(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'); } });EDITAR
Estaba tratando de hacerlo receptivo usando Java como en el primer código que di, .css normal no funcionará ya que solo dará para h1, h2, h3, etc. Estaba señalando que quería hacer el receptivo si el nombre completo alcanza las 40 letras, entonces el tamaño de 18px fontSize con otras funciones dadas
EDITAR 5:30 p. m. 29 DE MARZO
Esto es lo que probé hasta ahora, pero no funcionó como esperaba.
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); }) }Editar: se realizaron cambios para incluir el tamaño de fuente en función de la longitud del contenido.
Esto debería funcionar. Puede verificar esto en la página completa en el fragmento de código a continuación.
$(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>¿Intenta cambiar 'px' a 'rem', 'rem' cambia el tamaño en relación con el tamaño de la pantalla?
Esto es lo que quise decir para el tamaño automático para cada dispositivo
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"; } }¡Gracias por todos los que comentaron!