Здравствуйте. Подскажите пожалуйста, как верно изменить этот скрипт, чтобы при разрешении экрана меньше 420px высота блока detail_text изменяла значение? Сейчас при любом разрешении экрана выставляется значение в 200px, что не подходит для мобильных телефонов. Копала в сторонуmatchMedia, но что-то идет не так.
<script type="text/javascript">
var element_detail_text = $("#detail_text").html();
$("#detail_text_resize").show();
function resize_text_field(){
if(document.getElementById("detail_text").offsetHeight > 200){
document.getElementById("detail_text").style.overflow = "hidden";
document.getElementById("detail_text").style.height = "200px";
document.getElementById("detail_text_resize").style.display = "";
}
resize_text_field();
onload = function(){ resize_text_field() }
function element_detail_show(){
$("#detail_text_resize").hide();
document.getElementById('detail_text').style.overflow='';
document.getElementById('detail_text').style.height='auto';
$("#detail_text_minimize").show();
}
function element_detail_hide(){
$("#detail_text_minimize").hide();
document.getElementById('detail_text').style.height='200px';
document.getElementById('detail_text_resize').style.display='inline-block';
document.getElementById('detail_text').style.overflow='hidden';
$("#detail_text_resize").show();
}
</script>