Определение разрешение экрана

[Sulpher]

Добрый день!

Не секрет, что мониторы с высоким разрешением завоевывают популярность и уже практически начинают смещать стандартный экранный режим 1024x768, в связи с чем все чаще приходится задумываться о поддержке обоих стандартов (1024x768 и 1280x1024 - больше пока, думаю, нет смысла), но поскольку резиновая верстка накладывает определенные ограничения в плане дизайна, я решил сделать два шаблона - определять разрешение экрана и грузить нужный CSS.

Использовал следующий скрипт:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
if(screen.width >= 1280)  {
	 document.write('<link href="/templates/mservice_optimal/css/template_css_wide.css" rel="stylesheet" type="text/css" />');
}
else {
	 document.write('<link href="/templates/mservice_optimal/css/template_css.css" rel="stylesheet" type="text/css" />');
}
/*]]>*/
</script>

Он проходит W3C валидацию, но... видимо, в связи с тем, что это Java sctipt, Jigsaw валидатор не видит загруженные стили и сообщает: there are no any stylesheets in this document.

Господа, можете подсказать решение? Как лучше всего определять разрешение экрана и при этом соблюсти XHTML и CSS валидацию?

[styleroom]

а вот такой скрипт не пользовали? =

<script language="javascript"> 
	//ЭТОТ КОД НЕОБХОДИМО ВСТАВИТЬ В КОД 
	//ГЛАВНОЙ СТРАНИЦЫ САЙТА 
	//Инициализируем переменные высоты и ширины 
	var height=0; 
	var width=0; 
	//Определяем реальные значения высоты и ширины 
	if (self.screen) 
		{ 
		width = screen.width 
		height = screen.height 
		} 
	//Анализируем найденные параметры и отсылаем 
	//пользователя на страницу с нужным разрешением 
	if (width == 1024 && height == 768) 
		{ location.href = "path_to_file_1024x768" } 
	else if (width == 800 && height == 600) 
		{ location.href = "path_to_file_800x600" } 
	else if (width == 640 && height == 480) 
		{ location.href = "path_to_file_640x480" } 
	else 
		{ location.href = "path_to_default_file" } 
	//Последней строчкой мы отослали всех с 
	//нестандартным / неопределенным разрешением 
	//на страницу по умолчанию 
	//НЕ ЗАБУДЬТЕ УКАЗАТЬ ПУТИ К ФАЙЛАМ 
</script>

Может поможет...

[Sulpher]

Скажите, а параметр высоты указывать обязательно? Валидатор ругается на двойной знак & в строках if (width == XXX && height == YYY)

Я опустил и привел строку к такому виду: if (width == XXX)

А также первую строчку сделал такой:

<script type="text/javascript">

Теперь все валидно. Как Вы думаете, так нормально? Валидация-то может и соблюдается,но не факт что заработает во всех браузерах. Я просто не знаю Java Script.

Вот на этом форуме мне дали ряд советов.

3. Этот подход кажется не оптимальным ещ? по одной причине: окно браузера не обязательно бывает раскрыто на всю ширину экрана. ИМХО, лучше похимичить посложнее, но понад?жней.

Там же привели такие строки:

// Вот так можно узнать высоту и ширину рабочей части окна (без тулбаров)

var clientHeight = document.compatMode=="CSS1Compat" && !window.opera?document.documentElement.clientHeight:document.body.clientHeight

var clientWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth

[Sulpher]

Я попробовал видоизменить Ваш скрипт таким образом:

<script language="JavaScript" type="text/javascript">
	var width=0; 
	//Определяем реальные значения высоты и ширины 
	if (self.screen) 
		{ 
		width = screen.width 
		} 
 if (width >= 1280) 
		{ location.href = "/templates/mservice_optimal/css/template_css_wide.css" };
		{ location.href = "/templates/mservice_optimal/css/stylesheet_wide.css" };
	else (width == 1024) 
		{ location.href = "/templates/mservice_optimal/css/template_css.css" }; 
		{ location.href = "/templates/mservice_optimal/css/stylesheet.css" };

</script>

Но он почему-то не работает...

[Jenek]

Не нужно делать отдельный файл под кадое разрешение там же не все меняться будет, я бы даже сказал будет минимум различий, наиболее логичный способ менять класс body в зависимости от разрешения.

Почитайте про адаптивную разметку и переключатель стилей.

Да простит меня модератор , но лучше совета чем подробная статья дать нельзя.