Разработка и продвижение сайтов
в Санкт-Петербурге
+7 (812) 629-29-85
info@kolibri-spb.ru
Следить за акциями
WEB студия в FacebookWEB студия в VK
Меню

Meta viewport. Адаптация под мобильные устройства

С чего начинается верстка

Несмотря на то, что статья посвящена теме об адаптации, мы кратко расскажем, как вообще начинается разработка сайта. Независимо от того, работаете ли Вы на denwer или просто решили сверстать на компьютере связанные между собой html страницы — надо подойти к вопросу с правильной стороны. И так, у нас есть или создаем папку www. В нее помещаем новую папку с названием проекта, допустим, site1.

Эта папка — временно наш сайт. Открываем ее и создаем файлы:

Содержание файла index.html

Приступим к верстке, каждый сайт, каждую страницу сайта можно начинать кодом:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Заголовок страницы</title>
         <!-- Подключаем шрифт -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
         <!-- Подключаем таблицу стилей -->
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <!-- Шапка сайта -->
        <header>
          <nav></nav>
        </header>
         <!-- / Шапка сайта -->
         
         <!-- Основное содержимое -->
        <article>
          <h1></h1>
        </article>
        <!-- /Основное содержимое -->
        
        <!-- Боковая колонка -->
        <aside></aside>
        <!-- /Боковая колонка -->
         
        <!-- Подвал сайта -->
        <footer></footer>
        <!-- /Подвал сайта -->
    </body>
</html>

Подключить шрифт подобным образом — не грех, для начинающих это самый простой вариант. Заходите на сайт fonts.google.com и выбираете нужный Вам шрифт, он автоматически сформирует ссылку на его подключение.

Конечно, наполнение файла index.html может незначительно отличаться, например, не потребуется использовать боковую колонку, уже дорабатываем для себя.

В данный момент, нас интересует тег viewport.

Тег viewport

Этот мета-таг отвечает за масштабирование элементов на странице, выглядит он следующим образом:

<meta name="viewport" content="параметры_атрибута">

Тег может принимать следующие параметры:

Для того, чтобы браузер начал воспринимать адаптивность, подстраивался под размер устройства, достаточно написать:

<meta name="viewport" content="width=device-width">
Пример адаптивной или резиновой верстки здесь.

Примеры наших работ

Разработка сайта

Монтаж и установка
видеонаблюдения

video-ustanovka.ru

Разработка + SEO

Кухни на заказ
«Мебельмания»

mebelmaniya.com

Разработка сайта

Изделия из дерева
«Бельки»

belechki.ru

Сопровождение сайта

Мебель на заказ
«Мебельмания СПб»

mebelmaniya.spb.ru

Разработка сайта

Апартаменты в Праге
«Ruterra Apartment»

rapartment.com

Разработка сайта

Техническое
обслуживание магазинов

tech-expert24.ru

Сопровождение сайта

Аренда
спецтехники

pst.spb.ru

Разработка сайта

Компания
«Строительные системы»

stroysystem.spb.ru

Разработка + SEO

Виллы и апартаменты
«Phuket Like Home»

phuketlikehome.com

Разработка сайта

Аренда квартир
«Egrande»

egrande.ru

Разработка + SEO

Тепловизионное
обследование

teploviz-spb.ru

Разработка + SEO

Акриловый камень
«White Rock»

w-rock.ru

Сопровождение сайта

Кузница
«Ковка-Питер»

kovka-piter.ru

Сопровождение сайта

Бюро переводов
«Translation-online24»

translation-online24.com

Модернизация сайта

Юр. компания
«Константа»

konstanta-pravo.com

Доработка сайта

Воздушные шары

spbcvetoshar.ru

Перенос с конструктора

Гостевой дом
на Рабфаковской

forshotel.ru

Студия веб-дизайна Колибри
ул. Якорная, д. 14, к. 3, лит. Д
Санкт-Петербург
Санкт-Петербург
195027
Россия
+7 (812) 629-29-85
x

Напишите нам, расскажем об услугах!

x

Привет!

WEB-студия "Колибри"
перейти в мобильный чат

Письмо с сайта

Задать вопрос