La función de cambio de tamaño de jQuery no funciona en Chrome

Tengo una página web con una imagen de encabezado grande en la parte superior de la página que ocupa todo el ancho y el alto de la vista. Encontré un fragmento en línea muy útil que evitó el extraño problema de cambio de tamaño que ocurre en el móvil cuando desaparece la barra url. Antes de incluir el código a continuación, la imagen del encabezado boostía de tamaño cuando la barra de URL desapareciera porque la altura de la vista boostía. El código funciona perfectamente, excepto que el problema persiste en la aplicación iOS Chrome. Cualquier ayuda aquí es muy apreciada

He decidido adoptar un nuevo enfoque para resolver este problema ya que la altura de la barra de URL en safari y chrome varía. Esto causaría complicaciones no deseadas y sería difícil que el ajuste funcionara perfectamente en ambos navegadores. El nuevo enfoque que estoy adoptando es que al ver la página web en una tableta o móvil, me gustaría establecer la altura a la altura de la vista en la carga y mantenerla a esa altura. He actualizado el código de jQuery a continuación de lo que tengo hasta ahora, sin embargo, todavía no funciona como se esperaba.

ENLACE A LA PÁGINA WEB

HTML:

jQuery:

 if ($(window).width() <= 1024) { var bg = $(".intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper"); function resizeBackground() { bg.height( $(window).height()); } $(window).load(resizeBackground); resizeBackground(); 

}

¿Tienes que intentar consultas de medios? Sería un litro más que hacer que JS escuche el cambio de tamaño del navegador y podría apuntar a navegadores específicos.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries