Как адаптировать страницу под мобильные устройства?

[StOK]

Подскажите, пожалуйста, как адаптировать отдельную страницу или одностраничник под мобильные устройства? Я создала страничку подписки с резиновым дизайном, но при проверке в сервисе гугла https://www.google.com/webmasters/tools/mobile-friendly/ оказывается, что моя страничка не оптимизирована под мобильные устройства, там же указываются распространенные недостатки:

- слишком мелкий шрифт;

- не задана область просмотра для мобильных устройств;

- ссылки слишком близко друг к другу;

- контент шире экрана.

 

Проверяла на мобильнике страничка целиком на нем видна без прокрутки. Но чтобы она показывалась в поиске, важно, чтобы она соответствовала стандартам гугла. Как это осуществить? 

Я попыталась задать область просмотра на мобильных устройствах и прописала: <meta name="viewport" content="width=device-width, initial-scale=1"/ > Все недостатки, перечисленные выше, сразу исчезли, но основной проблемой стала - "контент шире экрана". При этом гугл показывает, что на мобильнике отображается только левый верхний край странички. Какие теги и стили прописать, чтобы страничка соответствовала требованиям гугла и при этом полноценно отображалась в мобильниках? 

[antonKar]

шут его знает, попробуйте <meta name="viewport" content="width=480" />, как вариант

[StOK]

шут его знает, попробуйте <meta name="viewport" content="width=480" />, как вариант

 

Не помогло. Нашла, что нужно прописывать:

@media (min-width: 600px) {

 

}

 

@media screen and (max-width: 600px) {

      table thead {

        display: none;

        

      }

 

      table td {

        display: block;

        position: relative;

                      }

 

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

Но, к сожалению, все картинки и блоки с текстом, а также форма подписки лепятся к левому краю на мониторах мобильных устройств. Как это исправить?

 

И еще вопрос: я задаю ширину каждой ячейки, как и таблицы в процентах. Форма подписки и ее поля - тоже в процентах. Но на мобильниках это все вытягивается горизонтально за область просмотра. При задании фиксированной ширины в пикселях, на мобильниках отображается как нужно - по ширине экрана, а вот на мониторе компьютера форма подписки выглядит мелковато. Как это исправить?

Edited May 18, 2015 by StOK

[StOK]

Еще вопрос: многими верстальщиками, освоившими технику создания отзывчивых шаблонов, рекомендуется прописывать 

img {

max-width: 100%; height: auto;

}

 

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

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

Размеры картинок указаны в пикселях в коде страницы.

[antonKar]

На мобильных они выглядят еще хуже

На мобильных надо картинки в 2 раза больше размером, либо юзать векторные картинки

[Launder]

 

@media (min-width: 600px)

@media screen and (max-width: 600px)

 

Насколько актуально прописывать screen, only, all? Что если ограничится только разрешениями?