Ширина блока равна высоте экрана разных девайсов

[learner]

Я только собираюсь учить JS и практически ничего не знаю по этой теме, прошу помочь в одном вопросе
Его суть, - существует некий nav:
HTML:

<div id="page">
	<div id="wrap">
		<nav id="nav">
			<ul> 
				<li><a></a></li>
				<li><a></a></li> 
				<li><a></a></li> 
				<li><a></a></li> 
				<li><a></a></li>
			</ul>
		</nav>
	</div>
</div>

CSS:

#page { 
      max-width: 100em;  /*1em=10px*/
      margin: 0 auto;
}

#wrap { 
      width: 92%;
      margin: 0 auto;;
}

#nav {
      height: 5.5em;
}
        
#nav li {
      width: 20%;
      height: 5.5em;
      float: left;
}

При ширине экрана в 320рх я его переворачиваю:

@media (max-width: 320px) {
	#nav {
		height: 20px;
		position: fixed;
		top: 0;
		left: 0;
		transform-origin: 0 0;
		transform: translateX(20px) rotate(90deg);
	}

	#nav li {
		height: 20px;
	}
}

Задача стояла, как сделать nav резиновым по отношению к высоте окна, можно написать #nav{width: 100vh;}, но единицы vw и vh не кроссбраузерное решение.
Нашёл здесь на форуме такой ответ на вопрос, как присвоить высоте div значение window.innerHeight.

<script type="text/javascript">
    onload = function() {
        var div  = document.getElementById("nav");
        var html = document.documentElement;
        div.style.height = html.clientHeight + "px";
              
        onresize = function() {
            div.style.height = html.clientHeight + "px";
        };
    }
</script>

Переписал скрипт вот так:

<script type="text/javascript">
    onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = html.clientHeight + "px";
              
            onresize = function() {
                div.style.width = html.clientHeight + "px";
            };
       }
</script>

И вот так:

<script type="text/javascript">
        onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = window.innerHeight + "px";
              
            onresize = function() {
                div.style.width = window.innerHeight + "px";
            };
       }
</script>

И оба моих варианта работают во всех браузерах FF, Chrome, Safari, Opera, IE9. Но есть два вопроса, во-первых, как сделать так, чтобы скрипт срабатывал только при медиа-запросе и только при ширине окна 320px и меньше и во-вторых, какой из двух моих вариантов скрипта надёжней, если так можно выразиться. Надеюсь на ответ.

[krasovsky]

Как ты сделаешь при медиа-запросе? Никак. На window.onresize проверяй ширину экрана и исполняй соответственно.

[learner]

На window.onresize проверяй ширину экрана и исполняй соответственно

Во-первых большое спасибо за ответ, но я пока мало что в JS смыслю, каков синтаксис такого выражения?

onresize = function() {
                div.style.width = window.innerHeight + "px";
           };

я по-дилетански пробовал так:

div.style.width320px = window.innerHeight + "px";

и так;

div.style.width.320 = window.innerHeight + "px";

не работает, как я понимаю, из-за моего безграмотного синтаксиса.

[krasovsky]

Вот
http://jsfiddle.net/czo3c2er/

[learner]

Вот
http://jsfiddle.net/czo3c2er/

Спасибо за ответ, Ваш скрипт работает, но это не то, что мне нужно. В Вашем скрипте блок, с заданными шириной и высотой подстраивается под искусственно изменённое окно. То есть, при загрузке страницы получаем блок с первичными параметрами, а если мышью изменить размер окна, то блок растянется на всю его площадь.
У меня же стоит задача для адаптивного дизайна, и тут речь идёт о первоначальной загрузке когда блок, ставший из горизонтального положения в вертикальное за свою ширину должен взять высоту окна просмотра того девайса, но который он загрузится. тут дело не в ресайзе окна мышью.
Повторюсь, вот скрипт, который это делает, он переписан мною методом тыка с другого скрипта, но он работает.

onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = window.innerHeight + "px";
       }

Для решения не хватает лишь задать ему условие ширины окна при котором он ширине nav придаст высоту окна. Как его переписать так, чтобы он срабатывал только при ширине окна 320рх и меньше?
Не знаю правильно ли я понял Ваш ответ и грамотно ли объяснил мой вопрос.

[krasovsky]

Так а в чем проблем?
Проверяй каждый раз при загрузке страницы ее ширину

window.onload = function(){
if (window.innerWidth >= 320) {
div.style.width = window.innerHeight + "px";
}
}

[learner]

Так вот проблема в том. что в такой Вашей транскрипции:

window.onload = function(){            
            if (window.innerWidth >= 320) {
            div.style.width = window.innerHeight + "px";
            }
    	}

скрипт не работает, как я думаю, не может найти объект к которому применить своё действие, а если я добавляю строку с id:

window.onload = function(){ 
           var div  = document.getElementById("nav");
            if (window.innerWidth >= 320) {
            div.style.width = window.innerHeight + "px";
            }
    	}

то он срабатывет, но не только при ширине окна 320, но при всех больших разрешениях. Правда при разрешении меньше 320 уже всё ок.
В редакции без Вашей новой строки

if (window.innerWidth >= 320)

он при любых разрешения экрана находил nav и присваивал его ширине высоту экрана.

[krasovsky]

Ну ясное дело, что переменную div надо определить сначала. Я привел пример просто а не полный код, кроме того почему бы тебе не заменить ">" на "<" самостоятельно?

[learner]

Дело в том, что как я писал выше, я только буду учить js и его синтаксис для меня пока ещё тёмный лес, теперь, благодаря Вам я уже знаю, что >= это больше или равно, а это <= меньше или равно.
Ещё раз спасибо Вам за Ваше терпение и ответы.
В таком виде:

window.onload = function(){
    var div  = document.getElementById("nav");
        if (window.innerWidth <= 320) {
            div.style.width = window.innerHeight + "px";
        }
}

всё работает, но если иметь в виду ещё и ресайз окна по вертикали, я написал вот так:

window.onresize = function(){
    var div  = document.getElementById("nav");
        if (window.innerWidth <= 320) {
            div.style.width = window.innerHeight + "px";
        }        
}

это работает. Но я не знаю, должны ли эти записи быть телом одного скрипта, телом одного JS-документа при подключении из внешнего файла или это два разных скрипта с самостоятельным подключение для каждого? Работают все варианты, даже так:

window.onload = function(){
    var div  = document.getElementById("nav");
        if (window.innerWidth <= 320) {
            div.style.width = window.innerHeight + "px";
        }
window.onresize = function(){
    var div  = document.getElementById("nav");
        if (window.innerWidth <= 320) {
            div.style.width = window.innerHeight + "px";
        }        
}
}

И ещё один вопрос, если позволите. При ресайзе окна по ширине, с 320рх на большую, когда nav становится в своё исходное горизонтальное положение, то без перезагрузки страницы он всё ещё принимает высоту окна, в качестве своей ширины. Я попытался это исправить, не зная возможно ли это в принципе:

window.onresize = function(){        
    var div  = document.getElementById("nav");
        if (window.innerWidth > 320) {
            div.style.width = parent.style.width + "px"; // мои каракули
        }
}

Не работает.
Ширина nav при ширине экрана больше чем 320рх у меня 100% ширины своего родителя #wrapp. Пробовал взять переменную wrapper:

div.style.width = wrapper.style.width + "px";

Так тоже не работает, ширина всего окна мне не подойдёт, так как #wrapp уже, и его ширина меняется при разных разрешениях экрана.

[krasovsky]

По первому вопросу, конечно же код не должен повторятся, оберни в функцию и используй когда нужно

myFnc = fucntion(){
        var div  = document.getElementById("nav");
        if (window.innerWidth > 320) {
            div.style.width = parent.style.width + "px"; // мои каракули
        }
}
window.onload = myFnc();
window.onresize = myFnc();

Вроде можно даже так "window.onload = window.onresize = myFnc();", не знаю не проверял.

По второму можно дописать

if (window.innerWidth <= 320) {
        div.style.width = window.innerWidth + "px"; 
 }
 else {
        div.removeAttribute('style');
 }

Этот способ убирает инлайн-атрибут style, снимая стили навешанные через js и написаные прямо в html