Бувають випадки, коли вашій програмі JavaScript потрібно знати, який розмір екрана повинен мати можливість виконувати певні дії.
На щастя для нас, є вбудовані функції JavaScript, які можуть легко захоплювати різні розміри екрану на пристрої користувача в пікселях. Те, що ви використовуєте, залежить від того, що ви хочете зробити.
Отримайте дозвіл користувача
Можливо, ви захочете зробити щось, що стосується дозволу пристрою користувача. У цьому випадку слід використовувати вбудовані screen.widthта screen.heightвластивості. Вони дають вам розмір екрану, з яким ви маєте справу.
Це не область, з якою вам доведеться працювати на сторінці .T HESE значення представляє повноту екрану , тобто дозвіл дисплея користувача.
Отримати розмір браузера
Може бути цікавий додаток для роботи з поточним розміром браузера. Якщо вам необхідно отримати доступ до цих розмірах, використовувати screen.availWidthі screen.availHeightвластивість , щоб зробити це.
Пам'ятайте, що це розміри всього вікна браузера, починаючи від верхньої частини вікна браузера і закінчуючи тим, де браузер відповідає панелі завдань або краю робочого столу, залежно від налаштувань.
Цікава примітка :screen.availHeightтакож можна використовувати, щоб з’ясувати, наскільки висока панель завдань на комп’ютері. Якщо роздільна здатність вашого браузера скаже1366 x 768іscreen.availHeightповідомляє 728 пікселів, тоді ваша панель завдань має висоту 40 пікселів. Ви також можете розрахувати висоту панелі завдань, віднявшиscreen.heightіscreen.availHeight:
var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; /* For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. */Отримайте розмір вікна перегляду
Ці властивості цікаві і можуть бути використані для створення чудових ефектів. Ви можете використовувати window.innerHeightі, window.innerWidthщоб отримати розмір вікна веб-сторінки, як його бачить користувач.
Майте на увазі - ці значення не є статичними і змінюватимуться залежно від того, що відбувається з самим браузером. Іншими словами, якщо сам браузер малий, ці значення будуть меншими, а якщо браузер розгорнутий, вони будуть більшими.
Наприклад, якщо ви працюєте в Google Chrome і відкриваєте консоль (її потрібно закріпити збоку від вікна), window.innerHeightвона зміниться, щоб відображати висоту консолі, оскільки частина вікна буде заблокована.
Ви можете перевірити це, зателефонувавши window.innerHeight, взявши до відома значення, потім збільшивши розмір консолі, а потім window.innerHeightзнову зателефонувавши .
Ці властивості також зміняться, якщо будь-яким чином розгорнути або змінити ваш браузер. При максимальному розмірі браузера властивість window.innerWidthоднакова з обома screen.widthі screen.availWidth(якщо збоку немає панелі завдань, і в цьому випадку screen.availWidthвона не буде рівною). window.innerHeightдорівнює розміру площі у вікні самої сторінки (площі веб-сторінки).
Отримайте висоту та ширину веб-сторінки
Якщо вам потрібно побачити, наскільки висока чи широка ваша веб-сторінка насправді, є властивості захопити ці розміри: document.body.offsetWidthі document.body.offsetHeight.
Ці властивості відображають розмір вмісту в тілі самої сторінки. Сторінка без вмісту має document.body.offsetHeightзначення, близьке до того ж значення, що і window.innerHeightзалежно від того, які поля / відступи встановлені на тілі документа. Якщо для 0кореневого елемента html та тіла документа встановлено значення полів і відступів , тоді document.body.offsetHeightі window.innerHeightбуде дорівнювати без вмісту.
Ці властивості можна використовувати для взаємодії з вашою сторінкою / додатком залежно від того, що ви хочете зробити.