Перейти к содержимому

MOAB

- - - - -

Почему проверка мобильных страниц в Яндексе, гугл и браузере норм, а на практике печаль?

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

  • Войдите, чтобы ответить
Сообщений в теме: 6

#1 agropti

agropti

    Новенький

  • Новичок
  • Pip
  • 4 сообщений

Отправлено 24 Январь 2018 - 11:03

Здравствуйте. Столкнулся с проблемой у сайта с адаптивным дизайном.
Меню сайта при проверке в "Проверка мобильных страниц" в Яндексе полностью помещается в 1 строчку, при "исследовании элемента" в браузере Мозилла для устройств шириной 320px и других браузерах тоже помещается в 1 строчку.
Но. Когда захожу с смартфона в вертикальном режиме "меню сайта" в 2 строчки (фраза "О компании" в 2 строчки) тем самым меню выглядит не так как хотелось бы! Проверил на 2х разных смартфонах, итог печаль.
Кто-нибудь сталкивался с таким? Где ошибка? (уменьшение шрифта = не решение проблемы, так как яндекс и гугл жалуются на шрифт менее 12 пикселей)
Ошибка на всех страницах сайта www.agropti.com
На телефоне приблизительно так выглядит:
Изображение
А Яндекс сервис проверки видит так:
Изображение

#2 angr

angr

    Мастер

  • S.E.Syndicate
  • PipPipPipPip
  • 599 сообщений
999

Отправлено 24 Январь 2018 - 11:09

Просмотр сообщенияagropti сказал:

(фраза "О компании" в 2 строчки) тем самым меню выглядит не так как хотелось бы!
элементарно!
напишите "о нас"! и всё вместится...

#3 neskor

neskor

    Продвинутый

  • Участник
  • PipPipPip
  • 247 сообщений
148
  • ИзУльяновск (в данную минуту)

Отправлено 24 Январь 2018 - 14:29

Просмотр сообщенияangr (24 Январь 2018 - 11:09) писал:

элементарно!
напишите "о нас"! и всё вместится...

не поможет совет)))

На смартфоне не только не в одну строчку "О компании", но всё меню не вмещается, слишком длинное, потому и горизонтальная прокрутка еще добавляется, а пункт "Контакты" за экран уходит.

Почему так происходит, что инструменты Яндекса и Google врут? Да сплошь и рядом это, увы. Это же эмуляторы, они предполагают, что все ровненько будет, всё даже может быть и ровненько где-то, но не на вашем смартфоне. Потому верстальщики и занимаются сайтами и тестят их на этих эмуляторах и на устройствах реальных.

Выход для вас:
самый простой - как советовали выше - сократить названия пунктов меню, переносы поставить в длинных словах (тогда они в 2 строки будут, но на экран войдут). Перенос ставится, например так: Полу­фаб­ри­ка­ты

правильный - сделать адаптивное меню, не через таблицу, как у вас сейчас, кстати, может, в ней еще и дело (так как вы не обнулили там margin, border, padding, border-collapse, border-spacing - а потому браузеры на свое усмотрение их ставят), а должен быть значок общепринятый (три черты), по клику на который раскрывается список меню.

#4 Serg_pnz

Serg_pnz

    Hanswurst

  • Старая гвардия
  • PipPipPipPipPip
  • 1 957 сообщений
1 508
  • Из*** гонец? Гонец из Пензы?... Нет – реальный гонец!

Отправлено 24 Январь 2018 - 14:38

agropti, http://htmlbook.ru/css/white-space

И вообще при адаптивном дизайне принято меню прятать. Если не хочется, то можно сделать в две строки...
при тесте в "лисе" (ctrl+shift+M) до 320px всё ок даже с вашим меню
Цены на рекламу на форуме Webimho | Пущу на квартиру VPS саттелиты по 30 руб./мес.
Ида: Не все кальсоны с оторванными пуговицами – брюки. © Serg_pnz

#5 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 371 сообщений
1 984
  • ИзРоссии :(

Отправлено 24 Январь 2018 - 15:53

Там нет адаптивного дизайна ) Пару блоков резиновых, точнее ячейки )))
дивы как врапер таблицам и нет мерзкого подключения ксс. ААААА! здравствуй мой 2005 года! Аж слеза накатилась.

но за то медиазапросы есть)

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

Но зато загрузка отличная :)
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#6 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 2 829 сообщений
1 443
  • ИзСанкт-Петербурга

Отправлено 24 Январь 2018 - 16:23

Проще всего - переименовать в "О нас".
Можно еще поставить неразрывный пробел -
И как написал neskor нужно обнулить margin, border, padding, border-collapse, border-spacing
Еще вариант для первой ячейки задать min-width
Но красивее всего и современнее поставить значок "3 полоски" и "меню". По клику появляется скрытый до этого блок со всем пунктами меню.

#7 Дартаньян

Дартаньян

    во имя матана

  • Участник
  • PipPipPipPipPip
  • 4 785 сообщений
5 929
  • ИзКрии

Отправлено 25 Январь 2018 - 01:34

в таком виде это скорее всего отсутствующие на устройстве шрифты
всё должно быть не так




Похожие темы



Также с тегом адаптивный дизайн

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных



© 2018 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва

Мы в соцсетях: twitter | вконтакте | facebook | livejournal