function mobileView() { if ($(window).width() < 767) { if ($('#teaser #ai').length) { $('#ai').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-1</span></div>`); } if ($('.teaser #as').length) { $('#as').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-2</span></div>`); } // AD product condition check if ($('.teaser #ad').length) { $('#ad').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-3</span></div>`); } } else { // will trigger for desktop device if ($('.teaser #ad').length) { $('#ad').find('span').text('icon1-1'); } if ($('.teaser #as').length) { $('#as').find('span').text('icon1-2'); } if ($('.teaser #ai').length) { $('#ai').find('span').text('icon1-3'); } } } $(document).ready(function(){ mobileView(); )}; <div class='icon-wrp'> <span aria-hidden='true' role='img' class='custom-icons'>icon1-1</span></div> <div class='icon-wrp'> <span aria-hidden='true' role='img' class='custom-icons'>icon1-2</span></div> <div class='icon-wrp'> <span aria-hidden='true' role='img' class='custom-icons'>icon1-3</span></div>Para la vista de escritorio, en la posición particular, puse digamos icon-1 y para la vista móvil, hay icon-2. Cuando paso de la vista de escritorio a la vista móvil para probar desde el navegador Chrome, al principio aparece el icono 1 y, después de recargar, aparece el icono 2. Además, si abro la URL directamente solo en la vista móvil, funciona bien.
Escribo HTML para la vista de escritorio y la vista móvil. Usé Javascript si el ancho de la ventana <= 767, cambié el logotipo usando el HTML interno.
Esperando: en la vista móvil, debería ser el ícono-1 y cuando cambio la vista a móvil, debería cambiar al ícono-2 sin recargar la página.