Адаптивность и кроссбраузерность для сайта landing-order.ru

Автор: Дмитрий Исаенко
2 044

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по адаптивности и кроссбраузерности для сайта landing-order.ru.

Делать полностью адаптивный дизайн, чтобы он красиво отображался на мобильных устройствах нет необходимости, т.к. на конверсию это не влияет, а затраты будут довольно большие.

Потому, главное сделать, чтобы сайт хорошо отображался на ширине до 1024 пкс.

Применительно к нашему примеру, нужно в файл functions.js добавить код, который бы не создавал белого поля возле меню после изменения ширины экрана:

$(window).on("resize", function() {
		$("#menu").css("width", $(window).width() + "px");

1 2	$(window).on("resize", function() { $("#menu").css("width", $(window).width() + "px");

Кроссбраузерность

Проверять имеет смысл только в самых популярных браузерах:

Google Chrome
Firefox
Opera
Microsoft Explorer

Далее открываем наш сайт в перечисленных браузерах и тестируем все элементы сайта. Также тестируем на разной ширине экрана.

В следующий раз мы переходим к программированию клиентской части и займемся созданием базы данных (БД) — не пропустите!

Как вам статья? Советую получать свежие статьи на e-mail, чтобы не пропустить информацию о выходе новых статей, бесплатных видеокурсах и конкурсах блога!

С уважением, Дмитрий Исаенко

P.S. Понравилась статья? Пожалуста, понажимайте на кнопочки социальных сетей, которые расположены ниже, тем самым Вы расскажаете про эту статью Вашим друзьям!