Як визначити дозвіл екрана і розмір вікна браузера на javascript і jquery, shublog

Для чого це треба? Наприклад у нас є гарний макет сайту, який всю свою красу проявляє тільки при дозволі, скажімо, до 1600 x 1200. Наприклад, у нього дуже велика красива шапка. Що буде якщо людина зайде на сайт при дозволі

Як визначити дозвіл екрана і розмір вікна браузера на javascript і jquery, shublog
1024 на 768? Так, тільки шапка і буде видно. Не добре? Мабуть. Тоді чому б не зробити таку річ, що при висоті браузера / екрану шапка б просто обрізалася, а йшло меню і решті сайт? Во, то що треба.

А після того, як вибрали, пишемо код, можна в шапці сайту. Спочатку приклад, орієнтований на дозвіл екрана.

Дивимося другий приклад, але який буде орієнтуватися на дозвіл браузера. Все те ж саме, змінилися методи.

Отже, з двох прикладів короткий огляд - що для чого використовувати:

  1. screen.width. Визначає ширину екрану (монітора).
  2. screen.height. Визначає висоту екрану (монітора).
  3. document.body.clientWidth. Визначає ширину браузера.
  4. document.body.clientHeight. Визначає висоту браузера.
  5. $ (Window) .width (). Визначає ширину браузера, але тільки при наявності jQuery.
  6. $ (Window) .height (). Визначає висоту браузера, але тільки при наявності jQuery.

Зрозуміло, що якщо ви використовуєте jQuery, то краще 5 варіант, ніж 3, і 6 ніж 4 - вони коротше просто. Ну а так - на смак і на колір.

Що стосується специфічних записів висоти і ширини екрани дл jQuery - то, по правді кажучи, я їх не знаю. За ідеєю повинна бути конструкція типу 5-6 рядків, але якось на практиці не стикався, здається мені, їх немає. Та й не треба, screen.width досить коротка конструкція, її вистачає.

Так, ще є $ (document) .width () - визначає ширину HTML документа. Використання на практиці - як-то сумнівно. Хто знає - буду радий, якщо поділіться.

На сьогодні все! Тримаємося до вихідних і масово їдемо на шашлики! (Якщо тільки ви не хворі чимось, як деякі - прим.ред.). Успіхів!