При розробці інтерфейсів для сайтів частенько доводиться користуватися JavaScript. Звичайно ж це погано, але в деяких ситуація просто неможливо реалізувати повністю все на CSS.

Сама часта потреба саме у мене виникає у визначенні ширини або висоти вікна браузера для подальших маніпуляцій. Під катом вся інформація по цій темі.

Де це може стати в нагоді?

Я не буду говорити за всіх, але мені це пригождается в інтеграції з Textpattern`ом всіляких галерей, слайдерів і т.д., де все написано на чистому JS. Речі, які жорстко зав'язані на JS зустрічаються рідко, але все ж зустрічаються, тому і з'явилася ця замітка.

До речі, якщо є інші питання по html, то найкраще ставити їх на спеціалізованих форумах - http://www.cyberforum.ru/html/ . Хоч це і форум сисадмінів, та програмістів, там все одно є багато інформації по верстці і web-розробці в цілому.

Визначати можна 2 способами: JS або jQuery.

Визначення ширини або висоти за допомогою чистого JS

Це самий кращий спосіб, так як движок JavaScript є практично у кожного сучасного браузера. Навіть мобільні браузери навчилися працювати з JS.

Звичайно ж є ймовірність того, що користувач власноруч скасувати обробку JS в браузері, але, здається мені, таких "дивних людей" не так багато, так як практично кожен сайт використовує якісь рішення, які працюють на JS.

В JS, щоб визначити розміри екрану, потрібно використовувати функції:

screen.width // Ширина екрана screen.height // Висота екрану

Ось безглуздий приклад використання:

<Script type = "text / javascript"> alert (screen.width + 'x' + screen.height); </ Script>

Якщо Ви використовуєте це для позиціонування якихось елементів на сторінці, то кращим рішенням буде використовувати не розміри екрану, а розміри вікна браузера. В JS це робиться так:

document.body.clientWidth // Ширина браузера document.body.clientHeight // Висота браузера

Відповідно ось безглуздий приклад використання:

<Script type = "text / javascript"> alert (document.body.clientWidth + 'x' + document.body.clientHeight); </ Script>

Визначення розмірів браузера за допомогою jQuery

Особисто я користуюся методом, який описаний нижче. Цей метод працює тільки якщо у Вас на сайті раніше підключена бібліотека jQuery. На всіх сайтах, які мені доводиться робити ця бібліотека є стандартом де`факто.

Щоб задіяти для нашої задачі jQuery, необхідно використовувати код:

$ (Window) .width (); // Ширина браузера $ (window) .height (); // Висота браузера

І в кінці хотілося б сказати, що якщо є можливість обійтися без JS і jQuery взагалі або частково, то саме так і треба чинити.