Простые способы оптимизации сайта под мобильные устройства
21.04.2018
Технологии XXI века развиваются все быстрее и быстрее. Сегодня смартфоны, планшеты и другие гаджеты становятся все популярнее и трафик с мобильных устройств стает все больше.
Владельцам сайтов необходимо считаться с владельцами смартфонов и планшетов и проводить оптимизацию сайта под мобильные гаджеты. Для создания качественного ресурса, проведение такой работы – это просто необходимость.
Сегодняшняя статья расскажет об основных правилах проведения оптимизации сайта для корректной работы на мобильных устройствах. Это даст дополнительный трафик на сайт с мобильных устройств.
Оптимизация производительности Android
Viewport
Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.
meta viewport выглядит примерно так:
meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;">initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,
maximum-scale указывает максимальное значение увеличения страницы сайта.
Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.
Media Queries
Технология Media Queries позволяет оптимизировать стиль сайта с помощью точек преломления. Традиционный шаблон сайта не будет корректно отображаться на мобильных устройствах. С технологией Media Queries можно определить стили шаблона для экранов любых размеров. Технология также позволяет добавлять стили шаблона в зависимости от расположения устройства (вертикально или горизонтально) и количества точек на экране смартфона или планшета.