Предыдущий ролик Следующий ролик  

Видео урок: Определение размера экрана при помощи JavaScript

Создание отзывчивого веб-дизайна

Чтобы начать определять размер окна при помощи JavaScript, давайте переключимся в текстовый редактор. Открываем design.js, и теперь нам нужно определить несколько переменных вот здесь в верху документа. Давайте добавим несколько Return перед document.ready. Пишем var, затем пробел. Называем переменную windowSize. Ставим затем две одинарные кавычки и точку с запятой. Эта переменная будет строковым литералом, и сейчас мы устанавливаем ее равной null. Следующая переменная, мы назовем ее windowWidth. Она будет равна 0. Нажимаем Return. Также нам нужно установить еще одну переменную с названием actualSize.

Мы также установим ее на 0. Теперь, когда переменные созданы, давайте перейдем под document.ready. А сейчас мы создадим другую пользовательскую функцию. Пишем function, пробел, называем ее checkBrowserSize. Ставим круглые скобки, затем фигурные, заходим в фигурные. Когда мы тут, первое, что мы сделаем, это определим ширину окна. Идем сюда, двойной клик, чтобы скопировать имя переменной. Идем вот сюда, вставляем. Мы устанавливаем windowWidth на window.outerWidth, затем точка с запятой.

Это встроенная JavaScript инструкция. На данный момент она работает с IE 9, во всех браузерах Internet Explorer и во всех других современных браузерах. Эта инструкция определяет самую длинную от центра ширину браузера. Она не принимает во внимание никаких полос изменения размера или полос прокрутки. И когда мы начнем определять это, мы увидим отличие области контента, на которую смотрит также медиа-запрос, от области внешней ширины. Теперь, когда ширина установлена равной window.outerWidth, нажмем Return.

Давайте создадим другую переменную, которую мы будем использовать только внутри этой функции. Пишем var, пробел, contentWidth. Пишем знак равно, и здесь мы будем использовать JQuery. Знак доллара, круглые скобки, внутри одинарные кавычки. Ищем элемент body. За круглыми скобками .width, другой набор круглых скобок, затем точка с запятой. Следующая переменная будет называться sizeDifference, или sizeDiff. Мы установим ее на windowWidth минус contentWidth. Давайте зайдем сюда и скопируем имя переменной для ширины окна,

а затем отрежем contentWidth. Это даст нам ширину полосы прокрутки. Следующая строка. Пишем actualSize. Мы сбросим эту переменную, которую объявили вверху, и установим ее на windowWidth, а затем отрежем sizeDifference. Потом точка с запятой. Теперь, когда все на месте, мы переходим вот сюда и добавляем несколько операторов условия, чтобы определить действительный размер окна. Давайте начнем с оператора условия, пишем if, открывающая и закрывающая круглые скобки, открывающая и закрывающая фигурные скобки. Внутри круглых скобок мы пишем actualSize.

Если actualSize больше, чем 800 пикселей, заходим в фигурные скобки. Мы установим новую переменную и назовем ее newWindowSize. Затем мы пишем две одинарные кавычки, первый строковый литерал, пишем large, затем точка с запятой. Следующая строка, пишем if, набор круглых и фигурных скобок. Внутри круглых скобок мы тестируем actualSize. Мы проверяем, является ли он меньше либо равным восьмистам пикселям. Затем пробел. Далее мы пишем двойной амперсанд, потому что нам нужно будет протестировать два условия.

Затем пробел. Далее нам нужно проверить, является ли actualSize больше, чем 500 пикселей. Если это так, мы устанавливаем newWindowSize на medium, затем точка с запятой. Следующая строка, последнее условие, пишем if, вставляем круглые и фигурные скобки. Если actualSize меньше либо равен пятистам пикселям, мы установим newWindowSize на small. Итак, еще раз, здесь мы определяем windowWidth, основываясь на window.outerWidth.

Затем мы определяем контент, который является размером body. А когда вызывается вертикальная полоса прокрутки, область body становится немного меньше. Итак, мы хотим определить, какова эта разница, что позволяет нам понять, какова ширина полосы прокрутки. Затем мы определяем действительный размер. Потом мы идем сюда, чтобы посмотреть, является ли действительный размер больше, чем 800 пикселей. Мы устанавливаем переменную newWindowSize на large. Если действительный размер меньше либо равен восьмистам, но больше пятисот, мы устанавливаем переменную newWindowSize на medium. А если действительный размер меньше либо равен пятистам, мы устанавливаем newWindowSize на small.

Когда все на месте, мы должны как-то отразить это на странице, чтобы увидеть, что все хорошо работает. Иногда я переопределяю элемент на странице, так что давайте просто переопределим тег h1, чтобы мы могли увидеть, какие значения установлены для этих переменных. Пишем знак доллара, круглые скобки, строковый литерал, h1. После того как мы нашли тег h1, давайте напишем .html, круглые скобки, точка с запятой. Внутри пишем windowWidth, затем знак плюса, две одинарные кавычки для строкового литерала.

Здесь мы нажимаем пробел, затем круглые скобки. За строковым литералом еще один знак плюс. Пишем contentWidth и снова плюс. Две одинарные кавычки для строкового литерала. Также вставляем сюда плюс. Затем знак плюса за строковым литералом. Пишем sizeDiff, знак плюса. Две одинарные кавычки для строкового литерала. Давайте закроем круглую скобку за строковым литералом. Снова знак плюс. Еще один строковый литерал, пробел, is, пробел. Знак плюса и переменная newWindowSize.

Что мы здесь делаем, так это просто сбрасываем текст h1, чтобы мы знали, какова текущая ширина окна, определенная здесь, какова ширина контента и какова разница в размерах. Здесь знак плюса, добавляем сюда эти два числа вместе, и мы видим, что windowWidth - это значение данных двух кусков. А затем мы покажем также новый размер экрана. Чтобы запустить checkBrowser, давайте зайдем сюда и скопируем имя данной функции. Копируем его в буфер. Вставляем это в document.ready. Далее пишем круглые скобки и точку с запятой. Теперь, когда все на месте, нажимаем Save.

Переходим в браузер, затем нажимаем Reload. И мы видим, что наш h1 скажет нам самую большую ширину страницы, в данном случае это 1126. Мы также видим, что на самом деле это 1111 плюс 15. Полоса прокрутки находится с правой стороны, так что JavaScript просто говорит нам обо всех этих параметрах внутри тега h1, и мы также видим, что это набор настроек для большого экрана. Давайте немного свернем браузер, чтобы экран стал среднего размера, и тогда я смогу увидеть, как все выглядит на таком экране. Когда я нажимаю Reload, внешний размер составляет 762 пикселя, и мы видим, что это 747 плюс 15.

Переходим к маленькому экрану, нажимаем Reload, и у нас 392 пикселя, то есть 377 плюс 15. Если я широко раскрою браузер, а это сужу, так что у нас не будет полосы прокрутки, нажму Reload, мы увидим, что эти два числа одинаковы. Сейчас мы должным образом определили внешнюю ширину браузера, а также определили контент, находящийся внутри. Дальше мы поработаем над тем, чтобы определить, когда браузер меняет размер с большого экрана на средний или маленький.