Из-за большого разнообразия размеров дисплеев и экранов смартфонов довольно часто возникает вопрос: как настроить тот или иной элемент так, что бы он корректно отражался на странице? Вариант, при котором ширина и высота экрана передаются при запросе на сервер и пользователю (браузеру клиента) выдаётся страница, сформированная на основании этих данных, уже обсуждался в статье "Как передать размеры экрана пользователя на сайт"; такой метод имеет ряд недостатков, поэтому в большинстве случаев лучше использовать дополнительную настройку элементов уже после загрузки страницы.
Дополнительная настройка осуществляется при помощи скриптов, написанных на JavaScript; эти скрипты запускаются автоматически сразу же после загрузки. Основной алгоритм действий довольно прост: скрипт получает данные от браузера (высота, ширина), обрабатывает их и меняет значения, прописанные в таблицах CSS или аргументах элементов (в тегах).
Изменение размеров элемента страницы после загрузки
Для того, что бы получить ширину и высоту экрана устройства пользователя, применяется простой код:
Далее нужно произвести необходимые расчёты; об этом поговорим ниже, а пока исключительно в качестве примера, изменим размер изображения, указанный в теге iframe:
Этот код создаст на экране контейнер для загрузки содержимого, указанного в атрибуте src, в виде окна размером 800*100 пикселей. Однако для экрана смартфона такая ширина не подойдёт, а изменить размеры при помощи CSS в этом случае не получится: браузер в первую очередь будет воспринимать то, что прописано в атрибутах данного тега. Кроме того, ширина экранов у смартфона может быть разной, поэтому прописывать все возможные величины просто не имеет смысла: намного проще получить эти данные от браузера и подставить их в данный тег.
Для начала нужно прописать для элемента идентификатор, что бы скрипт понимал, с чем ему работать:
Теперь получаем данные и вводим их в аргументы данного тега:
Обратите внимание на то, что высота элемента рассчитывается не от высоты экрана, а от ширины; это позволяет сохранить изначальное соотношение сторон 800:100 (8:1).
Но имейте ввиду, что просто так прописать этот скрипт на странице нельзя, иначе он будет выполняться для любого устройства, поэтому необходимо добавить код, который будет отличать смартфон от экрана монитора компьютера. Это можно сделать разными способами, поэтому данная тема подробно раскрыта в статье "вставить название статьи", а общая схема выглядит так:
Первая строка создаёт окно (фрейм), размеры которого зависят от устройства: если это монитор компьютера, то браузер использует значения, указанные в аргументах width и height тега, а если это смартфон, то конструкция if (вторая строка) запустит скрипт, который переопределит данные параметры.
Таким же образом можно изменять стили, прописанные в CSS, но с небольшим изменением кода:
Данный код позволяет уменьшить размеры выводимого изображения в соответствии с размерами экрана смартфона.
В заключение хочу отметить, что изменять можно и другие значения, указанные в CSS и аргументах, например, изменять по какой-либо причине адрес ссылки:
Указанный код на JavaScript позволяет заменить ссылку, указанную в аргументе href тега a, но использовать его напрямую в коде страницы нет смысла, так как адрес будет заменяться автоматически: необходимо выполнение какого-либо условия или действия, которое будет запускать данный скрипт. Это может быть, например, код для определения мобильного устройства (см. выше) или кнопка, при клике на которую адрес будет заменяться; в этом случае данный скрипт должен быть прописан напрямую (без дополнительных тегов) в аргумент onclick кнопки или представлен в виде функции, запускаемой кликом по этой кнопке, но это более объёмный (по количеству символов) вариант:
Данный код в редакторе обычно прописывается в одну строку.
Обратите внимание на применение в данном случае двух типов кавычек - одинарных и двойных: в двойные заключён арес ссылки, в одинарные содержимое аргумента. При клике на кнопку произойдёт замена адреса, указанного по умолчанию в ссылке с указанным идентификатором.