Определение размеров экрана в JavaScript и IE
При разработке web-приложений порой возникает необходимость определить размер экрана, на котором открыт браузер, и в зависимости от полученных результатов что либо изменить. Конкретно в моем случае была необходимость изменения расположения элементов интерфейса плеера курсов системы дистанционного обучения, написанного на Silverlight. Т.к. сам Silverlight средств для определения размеров экрана не предоставляет, пришлось использовать возможности JavaScript и обращаться к странице, на которой Silverlight-приложение было расположено.
var screenHeight = HtmlPage.Window.Eval("screen.height");
Приложение сделано таким образом, что если размеров экрана достаточно, то управляющие элементы выводятся в нижней части, а если экран по высоте мал (как, например, часто бывает на ноутбуках, где любят ставить широкоформатные дисплеи) - то они выводятся сбоку.
Вчера у нас была презентация системы для руководства, при этом в переговорной был установлен ноутбук, а к нему подключен проектор. Из браузеров - только Internet Explorer 8. Т.к. разрешение экрана ноутбука по высоте невелико, то, естественно, управляющие элементы расположились по второму варианту. Но мы то хотим чтобы все было красиво! Подумалось, что для экрана, коим является проектор, можно установить свое разрешение, и, по идее, места должно хватить для расположения кнопок управления внизу. Но не тут-то было. После перетаскивания окна браузера на второй экран, и работы с него, приложение в Internet Explorer упорно открывалось в компактном варианте. Бред, да и только. Дальнейшие эксперименты пришлось отложить из-за начала доклада.
Но сегодня я решил проверить, как работают функции определения размеров экрана в разных браузерах, благо на работе к компьютеру подключено два монитора. Создал тестовую страничку, в которую вставил небольшой javascript код, выводящий информацию о размерах экрана:
<script type="text/javascript">
setInterval(function () {
var el = document.getElementById('test');
el.innerHTML = 'height = ' + screen.height + '<br/>aH = ' + screen.availHeight;
}, 500);
</script>
изменил разрешение одного из мониторов - и о чудо! В нормальных браузерах, таких как Google Chrome и Mozilla Firefox цифры менялись, при перетаскивании окна с экрана на экран. В IE - нет. Причем попробовал как в IE8, так и в IE9 Beta - результат одинаково отрицательный.
Чтобы все это мое исследование не осталось на только на уровне слов и моего знания - написал баг-репорт по этому поводу. Будем надеяться, к релизу IE9 эту ошибку исправят.
Чт, 23.12.2010