Создание мобильной версии для сайта
Здравствуйте. Мобильная версия — 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, тогда и только тогда будет блокироваться класс.
Вот и всё, теперь вы знаете как блокировать блоки в мобильной версии и как уменьшать картинки, в соответствием с экраном, спасибо за уделённое время!_