Добавляем...


Распознавание возможностей: объект Screen
Объект Screen доступен в браузерах версий 4.x (и более поздних) и сообщает основные характеристики экрана браузера. Этот объект является дочерним для объекта Window, хотя, кажется, ему логичнее быть родительским для Window.

Следующий пример демонстрирует общие параметры экрана, которые могут проверяться в браузерах, поддерживающих работу с объектом Screen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>06iMne свойства объекта Screen</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
</head>
<body>
<h2>Свойства данного объекта Screen</h2>
<script type="text/javascript">
<! —
if (window.screen)
(
document.write("Высота: "+screen.height+"<br />");
document.write("Ширина:"+screen.width+"<br />");
document.write("Доступная высота: "+screen.availHeight+"<br />");
document.write("Доступная ширина: "+screen.availWidth+"<br />");
document.write("Качество цветопередачи: "+screen.colorDepth+"bit<br
/>");
}
else
document.write("Объект Screen не поддерживается");
// —>
</script>
</body>
</html>

Здесь вопросы могут вызвать только значения свойств availHeight и availWidth, указывающие, соответственно, высоту и ширину экрана за вычетом элементов оформления экрана операционной системы, а не доступные размеры окна браузера, как можно было бы ожидать.

Чтобы выяснить размеры окна браузера, например, в случае Netscape, необходимо использовать свойства объекта Window. В Internet Explorer следует обратиться к объекту Document и проверить body.

В случае DOM, чтобы найти размеры окна, предпочтительнее выяснить размеры корневого элемента, т.е. дескриптора <html>, а не <body>. Какой именно дескриптор следует рассмотреть, зависит от используемого в браузере режима визуализации (строгого или свободного), который определяется в документе оператором doctype.

Следующий пример показывает, как можно все это проверить. Что-то, конечно, может меняться ввиду несогласованности подходов производителей браузеров в области реализации определенных возможностей CSS, XHTML и JavaScript, но пример должен продемонстрировать основную идею концепции, о которой здесь идет речь:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Проверка доступного региона</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
</head>
<body>
<h2 align="center">Измените размеры окна браузера</h2>
<hr />
<form action="#" method="get" name="forml" id="forml">
Доступная высота: <input type="text" name="availHeight" size="4" /xbr
/>
Доступная ширина: <input type="text" name="availWidth" size="4" /xbr
/>
</form>
<script type="text/javascript">
<!---
var winWidth = 0;
var winHeight = 0;
function findDimensions ( )
{
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;

if (window.innerHeight)
winHeight ¦ window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
/* "грязный" трюк для работы с doctype в IE */
if (document.documentElement && document.documentElement.clientHeight
&&
document.documentElement,clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth - document.documentElement.clientWidth;
}
document.forml.availHeight.value= winHeight;
document.forml.availWidth.value= winWidth;
)
findDimensions ( ) ;
window. onresize=findDimensions;
//—>
</script>
</body>
</html>

В браузерах, позволяющих манипуляции с содержимым страницы и стилями во время выполнения, можно устанавливать размеры объектов экрана, например шрифты, приблизительно так же, как и размеры окна.

Рассмотрим следующий пример, который должен работать в Internet Explorer 5 и Netscape 6 и в более новых браузерах.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Динамическое изменение размеров</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
</head>
<body>
<h1 id="testl" style="font-family: verdana; text-align: center;">Текст увеличивается и уменьшается!</h1>
<script type="text/javascript">
<!--
function setSize( )
{
if (document.getElementByld)
{
theHeading = document.getElementByld("testl") ;
if (window.innerWidth)
theHeading.style.fontSize = (window.innerWidth / 13)+"px";
else if ((document.body) && (document.body.clientWidth))
theHeading.style.fontSize = (document.body.clientWidth / 13)+"px";
}
}
window.onload = setSize; // установка исходных размеров
window.onresize = setSize;
// —>
</script>
</body>
</html>

В браузерах типа Internet Explorer, поддерживающих выражения с правилами CSS, можно использовать нечто более элегантное, например следующее:


<h1 style="font-family: verdana; text-align: center;
font-size: expression(document.body.clientwidth / 13) ">
Изменение размера шрифта в Internet Explorer.</h1>

Замечание. Иногда лучше избегать использования JavaScript для изменения размеров объектов в CSS, а вместо этого указывать размеры в относительных единицах, например в процентах или единицах еm..

Кроме изменения размеров с помощью JavaScript можно также динамически менять цветовые схемы. Например, многие разработчики до сих пор используют цветные изображения с редуцированной палитрой, предлагающей всего 216 цветов и называемой инвариантной палитрой браузера (browser-safe palette), хотя во многих случаях можно использовать и более насыщенные изображения.

Следующий программный код можно использовать для вставки различных видов изображений в зависимости от условий окружения:


<script type="text/javascript">
<!--
if (window.screen)
{ // проверка качества цветопередачи...
if (screen.colorDepth > 8)
document.writeln('<img src="nonsafecolors.gif" />');
else
document.writeln('<img src="safecolors.gif" />');
}
else
document.writeln('<img src="safecolors.gif" />');
// —>
</script>
<!— Для браузеров без поддержки JS или с отключенной поддержкой -->
<noscript>
<img src="safecolors.gif" />
</noscript>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика