Как можно реализовать открытие определенной страницы при задании ширины дисплея?

Question

[Денис Приходько]

Добрый день. Подскажите, пожалуйста, как можно реализовать открытие определенной страницы при задании ширины дисплея.
Например: если ширина экрана меньше 1024px от отрывается страница index1.htm, а если ширина больше 1024px, то открывается index2.htm.
Спасибо.

Answer 1

[Mike Pol]

Можно это сделать на javascript при открытии страницы 1 выполнив данный код

<script>
var winW = 0, winH = 0;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
if (winW > 1024) {
  location.href = 'index2.htm';
}
</script>

Comments

[Денис Приходько]

Я в жава дуб дубом. А как можно сделать, что бы при заходе на страницу index происходила проверка и после скрипт перекидывал на нужно страницу?

[Aleksei Podgaev]

Т.е. вам нужно, чтобы пользователь заходил на страницу index.html, и после определения размеров открытого окна (не экрана, а именно открытого окна), его перебрасывало на страницу index1.html или index2.html соответственно? Вообще такое поведение уже позапрошлый век. Современные сайты обычно сами подстраивают стили страницы под размер экрана, а не заставляют пользователя скакать по страницам. Погуглите на тему "responsive layout" ;) Но если вы уверены, что вам это нужно, то конечно поможем. :)

[Денис Приходько]

@alexiusp Именно это мне и нужно=) Я понимаю что это уже редко где используется, но дело в том, что я использую карту изображения (map). и получается что на планшете все смотрится отлично, а на дескопе изображение мало, в процентах указать не получается, т.к. области съезжают.

[Aleksei Podgaev]

Ну можно тем же джаваскриптом размеры изображения подгонять, конечно. Но если вы приведённый выше скрипт вставите в свою index.html и в конце вместо if (winW > 1024) { location.href = 'index2.htm'; } поставите if (winW > 1024) { location.href = 'index2.htm'; } else { location.href = 'index1.htm'; } то всё будет работать. Кроме того в указанном скрипте считается (как я уже подчеркнул) размер открытого окна, а не дисплея. для подсчётов размера дисплея обычно используют window.screen.availHeight window.screen.availWidth Вот здесь есть подробная информация об этом: http://www.javascriptkit.com/howto/newtech3.shtml

[Par Mactep]

@HonesTks так грузите только map в зависимости от ширины. Зачем же такие жесткие редиректы

Answer 2

[Ырий Ведомый]

Проще было бы использовать css media queries и прятать/показывать контент в зависимости от размера экрана.

Comments

[Александр Вульф]

Проще, но, к сожалению, ест больше траффика:) А значит загрузка идет дольше (Мобильники в опасности).

Answer 3

[Сергей Мельников]

setTimeout(function(){
		if (window.outerWidth > 1024) {
			location.href = "index2.html";
		}
	},10);

Comments

[Par Mactep]

Вы явно сошли с ума....

[Сергей Мельников]

а что не так?