Отзывчивый веб-дизайн.

Дальнейшие улучшения.

Наш простой скрипт пополнился кодом, но конечный результат выглядит более надежно и функционально. Мы не принимаем во внимание возможности браузера или устройства, отображающего нашу страницу: если JavaScript доступен, на экране появится слайд-шоу.

Но нет предела совершенству, и этот небольшой черновой образец – не исключение. Например, мы могли бы сделать так, чтобы слайд-шоу появлялось только на определенных типах экранов, то есть указать в скрипте определенные диапазоны разрешений. Так, если мы не хотим, чтобы оно отображалось на устройствах с маленькими экранами, мы могли бы вставить в скрипт простую проверку разрешения:

if (screen.width > 480) {).

$(document). ready(function({ … });

}.

Этот оператор if выполняет те же функции, что медиазапрос min-width: 480px: если экран уже 480px, вложенный JavaScript не будет применяться (рис. 5.20).

Отзывчивый веб-дизайн

Рис. 5.20. Мы решили, что слайд-шоу станет доступным только для браузеров с разрешением свыше 480px. На более мелких экранах будет видна одна-единственная картинка

Пойдем еще дальше. Например, мы можем использовать легковесный JavaScript-загрузчик LabJS (http://labjs.com/) или Head JS (http://headjs.com/) для динамической загрузки jQuery, плагина «карусель» и нашего собственного custom.js для применения только в том случае, когда разрешение экрана достигает определенных значений. Благодаря этому пользователи устройств с маленькими экранами не окажутся заваленными лишним JavaScript, особенно если это препятствует загрузке «карусели». А поскольку мы учитываем пропускную способность канала, мы можем использовать фантастическую библиотеку «отзывчивых изображений», написанную Filament Group (http://bkaprt.com/rwd/56/). На устройства с маленькими экранами она выдает более легкие картинки, а на обычные, широкоэкранные – полноразмерные.