Собственно я описал один из примеров, с которым столкнулся на практике (см.картинку). Решал проблему просто - через javascript. А может и через jQuery, уже не помню. Опишу оба метода здесь.
Прежде всего следует отличать определение "разрешения экрана" и "размера окна браузера" (поскольку в некоторых статьях были казусы - хаили одни методы, предлагали другие, хотя в одном случае мерили разрешение браузера, в другом - разрешение монитора).
Нужно с самого начала определить что для Вас важнее. В случае того примера с шапкой, я ориентировался на разрешение экрана (монитора): всё таки сайт красив, если окно браузера уменьшено вручную, то пускай при просмотре этого сайта развернут свой браузера на весь экран (нечего им, панимаишь ли - прим.ред.). Но, к примеру, для подстройки развернутого изображения галереи jQuery Lightbox я использовал ширину и высоту браузера.
А после того, как выбрали, пишем код, можно в шапке сайта. Сначала пример, ориентированный на разрешение экрана.
Код: Выделить всё
<script language="JavaScript">
<!--
if (screen.width <= '1024') {
document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">');
}
$(function() {
if(screen.height<1050) {
$('#total').css('background-position', 'center -220px');
}
});
//-->
</script> Смотрим второй пример, но который будет ориентироваться на разрешение браузера. Всё тоже самое, изменились методы.
Код: Выделить всё
<script language="JavaScript">
<!--
if (document.body.clientWidth <= '1024') {
document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">');
}
$(function() {
if($(window).height()<1050) {
$('#total').css('background-position', 'center -220px');
}
});
//-->
</script> Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.Не кроссбраузерноИтак, из двух примеров краткий обзор - что для чего использовать:
- screen.width. Определяет ширину экрана (монитора).
screen.height. Определяет высоту экрана (монитора).
document.body.clientWidth. Определяет ширину браузера.
document.body.clientHeight. Определяет высоту браузера.
$(window).width(). Определяет ширину окна браузера, но только при наличии jQuery.
$(window).height(). Определяет высоту окна браузера, но только при наличии jQuery.
$(document).width(); Возвращает ширину HTML документа
$(document).height(); Возвращает высоту HTML документа
Что касается специфических записей высоты и ширины экраны дл jQuery - то, по правде говоря, я их не знаю. По идее должна быть конструкция типа 5-6 строк, но как-то на практике не сталкивался, сдаётся мне, их нет. Да и не надо, screen.width достаточно короткая конструкция, её хватает.
Да, ещё есть $(document).width() - определяет ширину HTML документа. Использования на практике - как-то сомнительно. Кто знает - буду рад, если поделитесь.
P.S JavaScript. Получение размера страницы
Источник: shublog.ru