6.7 KiB
| title | localeTitle |
|---|---|
| Get Screen Size in Pixels | Получить размер экрана в пикселях |
Могут быть случаи, когда ваше приложение JS должно знать, какой размер экрана должен выполнять определенные действия.
К счастью для нас, есть встроенные функции JavaScript, которые могут легко захватывать различные размеры экрана на устройстве пользователя в пикселях. Что использовать зависит от того, что вы хотели бы сделать.
Получить разрешение пользователя
Возможно, вы захотите сделать что-то, связанное с разрешением устройства пользователя. В этом случае вы должны использовать встроенные свойства screen.width и screen.height . Это дает вам размер экрана, с которым вы имеете дело. Это не та область, с которой вы должны работать на странице; эти значения представляют собой полноту экрана, то есть разрешение дисплея пользователя.
Получить размер браузера
Может быть интересное приложение для работы с текущим размером браузера. Если вам нужно получить доступ к этим параметрам, используйте для screen.availHeight свойства 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 и в window.innerHeight документа, то document.body.offsetHeight и window.innerHeight будут равны без содержимого.
Эти свойства могут использоваться для взаимодействия с вашей страницей / приложением в зависимости от того, что вы хотите сделать.
Вывод
Какое свойство использовать только на основе того, что вы хотите сделать. Прочитайте, что каждый из них делает, и решите для себя, какие свойства вы должны использовать для своего проекта.