Вопрос по метатегам в адаптивной верстке.

Всё зависит от ваших целей.
Если вы хотите только ублажать Гугл и Яндекс, то достаточно к десктопной версии сайта сделать всего одну мобильную версию сайта шириной 340 рх, которая выдается при просмотре с любого смартфона. И поисковики признают ваш сайт оптимизированным для мобильных устройств.
А если ваша главная цель, это ублажать публику, то делайте адаптацию под все размеры экрана, какие только возможны. Их порядка 20-30 видов.

Самый оптимальный вариант, это посмотреть по счетчикам посещаемости сайта на графики, которые показывают относительное распределение посетителей по разрешению монитора На относительных графиках видно, доля каких экранов растёт у посетителей конкретно вашего сайта, и доля каких экранов падает. И уже исходить из этих тенденций. Сделать 3-6 адаптаций под тенденцию вашей публики.
У каждого сайта своё распределение экранов посетителей и свои индивидуальные тенденции. Есть, например, сайты, на которых свыше 90% всех посетителей заходят только со смартфонами. А есть и такие сайты, на которые со смартфонами заходят не более 10% всех посетителей.

Конечно, это всё можно сделать, когда сайт не только что сделанный, а когда он уже просуществовал хотя бы полгода и на нём всё это время стоял счетчик, который может показать относительные графики (например, счетчик от liveinternet).
А если вы создаете новый сайт, которого еще никогда не было (то есть не новый дизайн на замену старому дизайну), тогда вы можете не угадать, под какие экраны делать адаптацию. В этом случае лучше сделать сначала два варианта (десктопную и мобильную), а уже потом через несколько месяцев подумать и про другие адаптации.

Самые важные разрешения экрана, при адаптивной верстке

320 px — Мобильные устройства (портретная ориентация);
480 px — Мобильные устройства (альбомная ориентация);
600 px — Небольшие планшеты;
768 px — Планшеты (портретная ориентация);
1024 px — Планшеты (альбомная ориентация) /Нетбуки;
1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т. д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:



Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:


Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.

Используй Bootstrap.

Используй сетки. Есть хороший инструмент Smart-grid можно сгенерировать любую сетку под свой проект. Посмотри на ютубе о нём и есть слитый курс по нему