Создание мобильной версии для сайта

Здравствуйте. Мобильная версия — 30% всего сайта. Если человек, перейдя на Ваш сайт, получит мелкий шрифт, долгую загрузку и плохое отображение, шанс, что уровень конверсии возрастёт  — 0%. Человек должен получать только качественную информацию на качественной основе, если основа — плохая, значит и человек не получит нужную информацию, а если он не получит информацию, тогда зачем вообще нужен сайт?

Мой блог сделан на движке, который изначально содержит в себе уже готовую мобильную версию, но первоначальная версия блога меня не устраивала и я её поменял, довольно-таки серьёзно, так что вся мобильная версия поплыла. Сперва, делать я ничего не стал, так как читателей блога почти нет, а кто и есть, заходят с компьютеров и ноутбуков, как показывает статистика. А так, как я давно ещё планировал написать эту статью, так что делать мне её всё равно нужно было. И тут начались мои страдания…

Сейчас на сайте у меня 3 блока:

• Статьи (70%)
• Линия (10%)
• Правый блок (20%)

И так, я выделил 2 главные проблемы, которые мешают нормально показывать информацию на телефонах:

• Картинки, которые вылезают за экран
• Блоки, которые налезали друг на друга

С первой проблемой справиться очень просто:

img {
max-width: 100%;
height: auto;
}

Теперь всё изображения будут подстраиваться пот устройство. То, что нам и нужно.

А вот со второй проблемой пришлось не просто. Подогнать 2 последних блока под телефон я не вижу смысла, они ни так важны, так что мне легче их скрыть, что бы не заморчиваться. И тут у нас 2 варианта, скрыть их с помощью css или js.

Если бы мы скрывали через css, код что был бы такой:

@media screen and (max-width: 600px) {
         .класс вашего меню { display:none; }
   }

Тут, если экран меньше 600px, тогда класс показывать не будет.

Вот и всё. Теперь давайте разберём и второй пример, с js:

<script>

if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){

document.getElementsByClassName(‘block-20’)[0].style.display = «none»

}

</script>

Всё тоже довольно просто, но реализуется немного по другому, в данном случае, если устройство типа: iPhone|iPad|iPod|Android, тогда и только тогда будет блокироваться класс.

Вот и всё, теперь вы знаете как блокировать блоки в мобильной версии и как уменьшать картинки, в соответствием с экраном, спасибо за уделённое время!​_