как настроить сайт для телефона
Как создать сайт с телефона бесплатно и самому — самый простой и пошаговый метод
Привет ребят, в этот раз мы с вами разберем вопрос «Как создать сайт с телефона». Я покажу вам, как я создаю сайт с мобильного телефона и как любой желающий может сделать тоже самое, имея лишь доступ в интернет.
Единственное, хочу предупредить. Создавать сайт с телефона — это тот еще геморой. И если у вас есть возможность создавать сайт с помощью компьютера, очень рекомендую сделать его именно с пк (это будет намного легче).
Где можно найти видеоуроки по созданию сайта с ПК?
На этой странице — artbashlykov.ru/course-free-wp, вы можете пройти мой бесплатный видеокурс по созданию, продвижению и заработку на своем сайте.
Там вы найдете более 30 уроков, которые помогут создать свой сайт с нуля и начать на нем зарабатывать.
Ну, а для тех, кто хочет создать сайт с телефона — смотрите пошаговую видео инструкцию ниже, в ней я разобрал как создать сайт на телефоне, что для этого потребуется и какие основные настройки нужно обязательно выставлять, при создании мобильного сайта.
Видео: Создать сайт с телефона бесплатно и самому — пошаговая инструкция
Инфа из видео:
Инструменты из видео:
➡ Хостинг и система управления тут — https://clck.ru/JedGb
➡ Бесплатный курс по созданию сайтов тут — https://study.artbashlykov.ru/free-wp-1/
➡ О том, как создать логотип, смотрите тут: Обзор генератора логотипов
Название темы/шаблона, который я использую в видео — ASTRA
Таймкоды:
0:18 — Организационные моменты
1:18 — Что потребуется для создания сайта
1:28 — Что такое хостинг
2:27 — Что такое CMS
3:43 — Регистрация на хостинге и установка CMS
5:23 — Вход в панель управления сайтом
5:33 — Как работает управления при создании сайта с телефона
7:20 — Первичные настройки сайта
11:55 — Как задать собственный пароль от сайта
13:10 — Настройка внешнего вида сайта (установка темы Astra)
14:56 — Настройка темы Астра
22:06 — Создание и настройка главной страницы
51:00 — Как установить созданную страницу в качестве главной
51:56 — Создание и настройка меню
55:28 — Регистрация доменного имени
1:00:33 — Как оплачивать хостинг
1:02:22 — Как прикрутить новый домен к своему сайту
Заключение
На этом все, если видеоурок оказался для вас полезным, тогда подпишитесь на мой канал на Ютубе и поставьте лайк этому видео. Ну а если у вас остались вопросы — пишите их в комментарии и я постараюсь на все ответить.
3 способа быстро адаптировать сайт под мобильные устройства
Google объявил, что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.
А пока мы советуем нашим клиентам и читателям задуматься об адаптации своих сайтов под мобильные устройства и предлагаем несколько способов сделать это быстро.
Оно мне надо?
Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:
Если вы видите подобное сообщение — статья для вас:
Адаптивный дизайн
В каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.
Как реализовать?
Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.
Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:
Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:
Некоторые элементы, которые актуальны для мониторов, можно, а иногда и нужно будет скрыть для мобильных устройств либо вместо них выводить другие, более компактные.
Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.
Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.
Что мы получим?
Сайт, который будет доступен со всех устройств, дизайн будет узнаваем на всех этих устройствах, только элементы будут сдвигаться по вертикали. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) либо будут отображаться в более компактном виде.
И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:
А для экранов менее 768px выглядит так (в свернутом виде):
И так, при клике на иконку в правом углу (в развернутом виде):
Отдельный шаблон для мобильных устройств на основном домене
В каких случаях подойдет? Практически для любого информационного сайта, блога, форума, в том числе для интернет-магазинов. Для визитки отдельный шаблон уже будет лишним.
Как реализовать?
Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.
Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.
Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.
Также в настройках этих плагинов есть возможность установить, какие блоки будут отображаться в мобильной версии сайта, а какие нет. Есть возможность добавлять свой логотип, что помогает пользователям, зашедшим на ваш сайт с мобильного устройства, идентифицировать ваш сайт.
Плюсы: В случае с плагинами — очень быстрый и простой способ реализации, быстрее, чем адаптивная верстка. В случае создания отдельного шаблона для сайта — возможность упростить дизайн сайта, уменьшить количество активных элементов, т. е. сделать сайт «легче».
Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.
Что мы получим?
Сайт для мобильных устройств будет доступен по тому же адресу, что и основной сайт, только шаблон его будет существенно отличаться от шаблона основного сайта, он будет значительно упрощен, но все-таки узнаваем.
Рассмотрим пример сайта с установленным плагином, который адаптирует его под мобильные устройства.
Например, вот так сайт выглядит на ПК:
А вот так выглядит этот же сайт на мобильном:
Мобильная версия сайта на поддомене
В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.
Как реализовать?
Этот вариант похож на предыдущий, также достаточно трудоемкий в плане реализации. Но для больших интернет-магазинов с огромным ассортиментом – единственный выход.
Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.
Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.
И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.
Плюсы данного метода: Можно существенно облегчить дизайн сайта для мобильных устройств, что хорошо скажется на его скорости.
Минусы: нужно создавать поддомен и настраивать его, писать для него отдельный шаблон и скрипт, определяющий, с какого девайса зашел пользователь, а это дольше, чем создание адаптивного дизайна.
Что мы получим?
Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:
Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google.
Пришла с небольшими знаниями в настройке, установке и принципах работы нескольких CMS. С тех пор «обросла» знаниями и опытом в разработке сайтов на следующих CMS, PHP и JS/CSS-фреймворках: WordPress, Joomla, Bitrix, MODx, Drupal, Codeigniter, Laravel, Bootstrap.
Разрабатывает, дорабатывает, перерабатывает и адаптирует сайты.
Девиз: если очень захотеть, можно в космос полететь
Как настроить Android-смартфон стандартными средствами
Содержание
Содержание
Умельцами создано множество самых разнообразных приложений и сервисов для настройки смартфона на Android. Вы можете скачать и установить их в дополнение к вашим приложениям, которых и так наверняка немало, можете отнести смартфон к специалисту, который настроит его под ваши пожелания за определенную сумму денег. Но по итогу не факт, что вы окажетесь полностью довольны. Как говорится, хочешь сделать что-то хорошо – сделай это сам.
Большинство настроек более-менее отвечают требованиям современного пользователя, но некоторые параметры скрыты от посторонних глаз и находятся в меню «Для разработчиков». Гайдов по этим параметрам в интернете немало, но в данной статье мы рассмотрим только те, которые могут быть реально полезны рядовому пользователю, не затрагивая «гиковские». Делать все это мы будем на примере смартфона на операционной системе Android версии 8.0.
Помните, что в все манипуляции в этом режиме вы делаете на свой страх и риск, и, если телефон не запустится, или будет работать не так, как раньше – автор снимает с себя всякую ответственность. Так что подумайте, прежде чем читать дальше и применять это на практике. Впрочем, следует оговориться, что большинство настроек, рассматриваемых в статье достаточно безобидны, и почти не затрагивают жизненно важные функции.
В любом случае, перед любыми такими экспериментами стоит сделать бэкап данных телефона.
Его включаем здесь: Настройки – Google – Резервное копирование, и назначаем Google-аккаунт, на диск которого будут заливаться резервные копии.
А если что-то пойдет не так, а вы не будете понимать, что именно, то можно выполнить сброс настроек до заводских.
Это выполняется так: Настройки – Система – Сброс – Сброс настроек.
Итак, все предохранительные действия выполнены, приступим.
Идем Настройки – Система – Справка – Сведения о ПО, и несколько раз «тапаем» по полю «Номер сборки», пока на экране не появится надпись «Вы стали разработчиком».
В разных моделях телефонов и версиях Android этот путь, название поля и количество тапов (от 5 до 10) могут отличаться. После выполнения этого пункта у нас в разделе «Система» появится меню «Для разработчиков».
Графические настройки
Первое, что стоит сделать – найти параметр «Отключение аппаратных наложений» (1) и активировать его. Он включает использование графического процессора для отрисовки экрана. Это в итоге существенно улучшило плавность скролла и качество воспроизведения видео.
Есть и другой параметр, отвечающий за использование графического процессора – «GPU-ускорение» (2). Он может улучшить, а может и ухудшить работу смартфона, однако в моем случае ни положительного, ни отрицательного эффекта не замечено.
У обоих параметров есть минус – после перезагрузки устройства они отключаются и приходится включать их заново.
Также за качество картинки отвечает функция «Включить 4x MSAA» (3), которая активирует сглаживание в приложениях, использующих Open GL. Она улучшает графику, но соразмерно ухудшает производительность и может непредсказуемо повлиять на работу смартфона, будьте осторожны.
Дальше обратим внимание на параметр «Минимальная ширина». Чем больше значение параметра, тем меньше размеры шрифта и элементов интерфейса. Таким образом экран смартфона становится вместительнее, но, если у вас плохое зрение, лучше не трогать это пункт. Минимальное значение параметра – 320 dp, максимальное – 960, стандартное – 360 dp.
Еще несколько параметров, которые могут быть полезны:
Параметр «Визуальный отклик» – при тапе на экране остается небольшой кружок в месте касания. Очень полезная функция для снимающих скринкасты, а еще с его помощью можно проверить калибровку экрана.
«Изменение размера в многооконном режиме» – параметр разрешает изменять размер окна приложения в многооконном режиме, даже если само приложение этого не позволяет. После такого изменения приложение может работать некорректно, поэтому имейте в виду.
«Имитировать аномалию» – режим изменения цветовой гаммы для людей, у которых иное восприятие цветов. К сожалению, изменения, включаемые этим параметром, не отображаются на скриншотах.
Память и производительность
Заходим в подменю «Работающие приложения». Здесь можно узнать, какие приложения запущены и сколько памяти они съедают. В верхней части экрана есть пункт «Показать работающие приложения» и «Показать процессы в кэше». Первый пункт показывает, какая часть памяти отдана под систему, а какая под приложения, второй показывает, какие службы приложений находятся в кэше. Можем остановить ненужные, чтобы освободить память.
В меню «Неактивные приложения» можно посмотреть все установленные приложения и их статус – включено или выключено. Многие приложения работают в фоновом режиме, для освобождения памяти их можно вручную отключить.
Возвращаемся в меню «Для разработчиков». Установим лимит фоновых процессов. Находим опцию, которая так и называется, она ограничивает количество фоновых приложений, работающих одновременно. Для нашего смартфона с его 2 Гб оперативной памяти это довольно важно. Мы установили значение параметра на значение «не более 4». Это явно увеличило производительность и емкость батареи, раньше она расходовалась за день, теперь ее хватает дня на полтора. Однако это имеет побочный эффект в виде неудобства – некоторые мессенджеры, например, не присылают уведомления о новых сообщениях, пока не полезешь проверять сам.
Также можно активировать опцию «Все ANR». Она включает уведомления, когда приложение работает некорректно и выдает отчет об ошибке.
Для некоторых может быть важна установка приложений на SD карту, даже если они лезут в основную память. В меню разработчиков включаем пункт «Разрешить сохранение на внешние накопители» – этот пункт как раз включает возможность устанавливать приложения не в память телефона, а на SD-карту, например. Однако, не факт, что установленное приложение будет работать. И, к сожалению, после включения этой опции уже установленные во внутреннюю память приложения переместить на внешний накопитель нельзя.
В этом разделе много параметров, но мы обратим внимание на две интересных настройки:
«Переключаться на мобильную сеть» – полезный пункт, при включении которого телефон будет автоматически подключаться к мобильной сети, если уровень Wi-Fi сигнала недостаточен для передачи данных.
«Всегда включать поиск сетей Wi-Fi»– телефон будет всегда искать доступные Wi-Fi сети, даже если пункт Wi-Fi основного меню отключен.
Также в меню «Конфигурация USB» можем включить режим работы смартфона при подключении к ПК по умолчанию. Есть пункт использования как USB-модема. Это полезно если Wi-Fi сетей поблизости нет, а выйти в интернет с ноутбука ну очень надо, причем не раз.
Помните – если вы меняете настройку при подключенном к компьютеру телефоне, работать в прежнем режиме телефон не сможет, пока не отключите его от ПК и не присоедините снова.
Прочие настройки
Пункт «Отчет об ошибке» предлагает нам два варианта: интерактивный и подробный отчет. Для оптимизации работы эти параметры не нужны, но, если вы захотите вдруг узнать, что разряжает батарею вашего смартфона быстро и бессимптомно – создайте отчет и изучите его с помощью специальной утилиты.
«Пароль для резервного копирования» – этот параметр вводит пароль, защищающий резервные копии данных от несанкционированного доступа. Резервные копии не создаются по умолчанию, но вы можете включить эту функцию в меню настроек «Google». Копии создаются как для настроек Google (контакты, настройки Gmail, календарь), так и для установленных приложений и настроек самого телефона (настройки и пароли сетей Wi-Fi, язык и способы ввода, настройки дисплея, обои, дата и время). Для удаления уже установленного пароля введите его дважды, а третью графу оставьте пустой.
«Не выключать экран»– при включенном параметре экран не будет гаснуть во время подзарядки. Эта функция может быть нужна, если вы пользуетесь телефоном как навигатором, тогда при подключении питания экран будет всегда включен. Однако злоупотреблять им не стоит – у экрана есть свой ресурс и не следует расходовать его без необходимости.
Отключить режим разработчика можно следующим образом: Настройки – Приложения и уведомления – Сведения о приложениях – Настройки – Хранилище и память – Стереть данные. После этого режим разработчика будет отключен, однако и все настройки, которые вы в нем изменили, сбросятся.
Будьте осторожны при работе с режимом разработчика. Большая часть настроек предназначена для технических специалистов и программистов, поэтому не стоит изменять значение параметров без знания о том, что делает каждый параметр, и как он влияет на работу устройства. Кроме того, помните – если играясь со значениями параметров вы случайно «убьете» смартфон, то в гарантийном обслуживании вам, скорее всего, откажут.
Мобильная версия сайта: как сделать самостоятельно + примеры кода
Приветствую, мои уважаемые читатели блога. На связи Галиулин Руслан. Сегодня будем говорить про мобильные версии сайтов которые должен иметь каждый сайт или блог чтобы продвинуться в ТОП поисковых систем. В статье дам коды стилей и готовые примеры верстки страниц, которые сможете скачать к себе на компьютер.
Если Ваш сайт до сих пор не мобилен, рекомендую воспользоваться моими советами или обратиться к профессионалам, которые сделают все по стандартам поисковых систем. По этой же ссылке можно и проверить свой сайт на мобильность.
В 2013 году Google начал давление на вебмастеров ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html ), убеждая в необходимости создания облегченных модификаций сайтов, а с 2015 года мобильность стала одним из аспектов ранжирования ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ).
Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.
Mobile Friendly сегодня — это не просто забота о посетителях, а непременное условие продвижения.
Когда сайт создается с нуля, применяют подход Mobile First. Но у большинства в наличии старые рабочие проекты. Главный вопрос, который в таких ситуациях вызывает мобильная версия сайта — как сделать ее, не испортив имеющийся шаблон?
Для владельцев старых проектов оптимальный выбор — использование адаптивной верстки. Как это сделать своими руками и без использования небезопасных плагинов, рассмотрим пошагово.
Мобильная версия сайта: как сделать правильно
Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.
Информация для новичков: в CSS слова перед фигурными скобками означают конкретные куски html файла, за отображение которых они отвечают. Пишутся чаще с точкой или решеткой — #место <свойство: значение;>.
Шаг 1. Снимаем ограничения
Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.
Width — ищем в коде крупные участки с жестко заданным отображением. Если параметр указан в пикселях или пунктах — нужно сменить его значение на проценты, em и прочие единицы, восприимчивые к окружению. Часто главный контейнер или область контента имеет фиксированный width — в большинстве случаев ограничения снимаются его заменой на max-width.
Картинки — вместо четких размеров прописываем свойства для тега img, которые придадут адаптивность изображениям. Фотографии будут менять пропорции в рамках родительских контейнеров.
Таблицы — полную адаптивность задать не получится, но можно сделать страницы с ними пригодными для мобильных устройств, добавив этот код:
Обтекания — задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.
Блоки встали друг над другом. Добавление обтекания убирает переводы строк, выставляет элементы в линию на все доступное пространство.
Шаг 2. Планирование реорганизации контента.
Выясните, какие детали десктопного сайта должны отображаться на мобильных устройствах. Для этого ответьте себе на вопросы:
Шаг 3. Удобство.
Навигация: экраны телефонов слишком малы, обычное меню сайта редко умещается в такие рамки. Принято устанавливать меню, раскрывающееся по кнопке.
Область контента: для телефонов, как правило, задают ширину основного блока в CSS до 100% в зависимости от доступного пространства. Это означает, что текст, модули, реклама, содержимое сайдбаров будут выдаваться на малых устройствах в один столбик.
Сенсоры: пальцы не так точны, как мышка, оставьте им достаточно места. Пространство вокруг ссылок и иных активных элементов должно составлять не менее 28 х 28 пикселей.
Помогайте своим посетителям определить активное пространство — отступы, выделения, смена цвета и прочие вещи, которые можно задать для касаний, прописывайте псевдокласс hover для ссылок и кнопок.
Реализация Media Queries с примерами
Если вы когда-либо создавали таблицы CSS для печати, то уже имеете представление о возможностях назначения отдельных стилей в зависимости от условий.
Media queries — логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.
Медиа запросы можно назначать по параметрам:
Актуальный список аргументов доступен в официальной спецификации.
Переходим к примерам. Есть готовый шаблон, размер его контентной части 1000 пикселей, все внутренние элементы и детали настроены в привязке к этому параметру.
Если экран пользователя уже, чем заданная контентная часть — появится полоса прокрутки. Плавающие элементы дизайна могут повести себя непредсказуемым образом — наезжать друг на друга, расплываться, слишком сильно сужаться.
Первым делом убираем фиксированный размер, создающий полосу, чтобы он не мешал настройке. В нашем шаблоне это обертка навигации. В макете читателя это может быть один или несколько элементов. Если затрудняетесь с определением, откройте браузерные инструменты разработчика — по представлению блочной модели найдите элемент, который не вписывается в размеры экрана.
Для исправления убираем фиксированные рамки, прописав в стили шаблона:
@media only screen and (max-width: 1000px) <
Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.
Но блоки по-прежнему выглядят сомнительно — изменим их отображение, увеличив ширину в процентах под нужные размеры.
Дописываем в тот же самый медиаквери:
Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку — fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент — 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.
Впрочем, можно применить box-sizing для контента, чтобы не высчитывать каждый раз пиксели, а работать по общим габаритам.
Переходим к заданию отображения на экранах с меньшим разрешением:
@media only screen and (max-width: 600px) <
Если экран менее 600 px, то наши блоки должны встать в одну колонку — убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.
Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.
Продемонстрируем возможности на примере смены цветов и отображений.
В версии для смартфонов скрылось основное меню, и цвет блока стал голубым, при этом более крупный экран отображает дизайн без этих перемен.
Скрытие навигации требуется в большинстве случаев — она заменяется кнопкой. Уместнее это делать при помощи javascript, можно использовать готовые решения.
Правки вносятся точечно, диапазон можно ограничить и сверху и снизу. Это быстро и удобно — одной строкой задается отдельный CSS для разных устройств, не задевая при этом основной вид сайта.
Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.
Мобильная версия сайта: как сделать и на что обратить внимание
Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.
Сам скрипт доступен на гитхабе ( https://github.com/scottjehl/Respond ), добавляет в старые IE поддержку минимальных и максимальных габаритов и медиаквери.
Еще одна проблема — адаптивный дизайн подразумевает использование Html5, который опять же непонятен старым браузерам. Лечится хаком:
Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:
header, nav, section, article, aside, footer
Сразу же затронем вопрос — как сделать, чтобы некоторые скрипты отображались лишь при заданных параметрах экрана. Если стоит jquery, в код шаблона потребуется добавить простенький скрипт. Цифры меняются на необходимые. Читается так: если ширина окна превышает 980 пикселей, к странице применяется скрипт, указанный в пути. Можно задать несколько, синтаксис пишется по аналогии через точку с запятой внутри фигурных скобок.
if ($( document ).width() > 980) <
$.getScript( “путь к скрипту”);
Еще один момент — как мобильный браузер айфона должен обрабатывать отдаваемый контент, разрешено ли его увеличение. Для этого в head прописывается инициальная шкала:
Осталось лишь проверить правильность — для этого можно использовать собственный браузер и телефон или обратиться к сервисам.
Если сайт переверстывается на локальном сервере, корректность можно определить в ami.responsivedesign.is. Владельцам денвера для верного отображения потребуется сменить кодировку на utf-8, отредактировав серверный файл httpd.conf.
Сервис продемонстрирует, как выглядит проект на разных устройствах.
В Яндексе это выглядит подробно, а Google просто сообщит, что проблемы отсутствуют.
Если все сделано корректно, не будет ни прокрутки, ни лишних элементов. Мобильная версия готова, и теперь вы научились делать ее самостоятельно. Если материал Вам был полезен, тогда ставьте лайки и подписывайтесь на рассылку новостей блога. Всех благ.