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



Здравствуйте. Мобильная версия — 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, тогда и только тогда будет блокироваться класс.

 

 

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


Отправить сообщение об ошибке
Сделай мир чуть умней, поделись статьёй :)

Опубликовал Apelsin2017 - 24 января 2017, 23:30 - 11 просмотров


Похожие записи: Bootstrap 3. Часть 2Bootstrap 3 - что это?Как создать сайт? Урок №1

Теги: #html и css


Комментарии




  • smilesadblumblushbyecraycrazybiggrindancedance2goodmoskingscratchshokshoutwackowinkyesbeeedntknwfriendsbadgamergamer2irefulmdameetingneaofftopicrofl



 

                      
Сделать заказ

Создание сайтов на разных языках или платформах на заказ за несколько дней.




Заказать!




Внимание!

Дорогие читатели, если вы увидели ошибку или опечатку, помогите нам ее исправить! Для этого мы запустили на сайте удобную клавишу для исправления ляпов. Выделите ошибку и нажмите одновременно клавиши «Ctrl» и «Enter». Мы узнаем о неточности и как можно скорее исправим.




Подпишись на еженедельную рассылку!

* indicates required



Рекомендую

Я перепробовал несколько хостингов, некоторые были часто недоступны, на других почти всегда были технические работы, но вот, мне наконец попал под руки этот замечательный хостинг, где цены начинаются от 11 рублей, почти никогда нет каких-то работ, что не может ни радовать. Представляю вашему вниманию: LITE.HOST



Сайт размещен на хостинге LITE.HOST стоимость от 53 рубля в месяц

Вход на сайт


Avatar