Визначаємо ширину / висоту екрану або вікна браузера за допомогою JS
- Де це може стати в нагоді?
- Визначення ширини або висоти за допомогою чистого JS
- Визначення розмірів браузера за допомогою jQuery
При розробці інтерфейсів для сайтів частенько доводиться користуватися 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 взагалі або частково, то саме так і треба чинити.
Де це може стати в нагоді?Де це може стати в нагоді?