anxieter

Дабы не плодить подобные темы хотел бы написать свой вопрос в похожей тематике.
Прошу Вас помочь доработать скрипт. Скрипт ресайзит фоновую картинку согласно разрешению экрана. Однако я столкнулся с проблемой - на мобильниках, когда контент внутри блока с данным фоном больше, чем разрешение экрана, он обрезает этот самый контент.
Для этого я решил воспользоваться медиазапросом. А вот какой результат:
В ChromeMobile, FirefoxMobile, картинка обрезается. В SafariMobile, YandexMobile, AndroidMobile срабатывает - то есть фон растягивается по контенту ниже нижней границы экрана.
Где-то нужно его доработать, но не знаю как, чтобы срабатывал во всех браузерах.

<section class="intro fullheight">
   ....content....
</section>

var wheight = $(window).height();
						var width = $(window).width();
						
						if (width => '768'){
							$('.fullheight').css('height', wheight);
							$(window).resize(function(){
								wheight = $(window).height();			
								$('.fullheight').css('height', wheight);
							}) 	
						} else {$('.fullheight').css('height', '700px');}

Значение 700px было поставлено просто наугад.

Добрый день.
Столкнулся также с неправильным отображением flex-box в Safari (точнее на устройстве IPAD Mini)
Консоль разработчика в Сhrome отображает все ровно, там как раз есть эмуляция данного девайса. На самом устройстве всё едет.
Прописал
display: -webkit-box;
-webkit-align-items: center;
-webkit-justify-content: space-between;
Это почему-то стало конфликтовать, и в Chrome и других браузерах опять все едет. Удаляю display: -webkit-box; - все в Chrome становится в порядке. Но Safari в таком виде все равно не работает.
Комментарии типа обнови Safari не принимаются.
Такими техниками как Grunt и Autoprefixer не пользуюсь - они действительно способны решить мою проблему?.. Просто на изучение потребуется время.... Может есть более быстрое решение?..