Jump to content
  • 0
Sign in to follow this  
Александр Архипов

Поехавшая мобильная версия

Question

Здравствуйте. Обрисую суть – сайт создан с фикс. шириной с несколькими точками остановки, вынужденная мера. Точки под 1920/1280/960/720/480/320 разрешение. На компьютере, то есть десктопный вариант сайта – все окей, в независимости от ширины браузера. Но на мобильном устройстве, будь то смартфон или планшет, хедер становится шире рабочей области и появляется горизонтальная прокрутка на 50-70 px вправо. 
До этого все было окей, но понадобилось увеличить хедер в высоту (был 55 px, сейчас 70 px), при этом больше ничего в шаблоне не поменялось, хедер как и футер по ширине браузера, все элементы – меню, лого, все в рабочей области, ничего никуда не выезжает. Но при этом футер ведет себя нормально, а хедер, именно на мобильных устройствах, становится шире. 
Футеру присвоена нижняя колонтитула, хедер же закреплен за верхней границей браузера – стандартно. 
Чего только не делал, думал может не хедер, но это дело на всех страницах во всех разрешениях именно с тачскрина, с компа все ок. Попробовал тупо удалить хедер – не помогло. 
Я вообще новичок, мой первый сайт, если вдруг не туда задал вопрос – прошу прощения.
Прикрепил скрин с мобилы, это разрешение 320, все элементы кроме хедера в рабочей области – как надо.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

Александр, надо давать ссылки на сайт и копию файла проекта, из которого желательно удалить всё кроме проблемной страницы (если страниц много). По описаниям можно только тратить время на предположения. Одно точно можно сказать - причина кроется в ваших пользовательских ошибках и она не в хэдере, а в основном контенте страницы. С хедером как раз таки всё нормально (судя по описанию). Это не он становится шире, а страница уже :). Больше ничего сказать нельзя без сабжа.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
6 минут назад, Павел Хомерики сказал:

Александр, надо давать ссылки на сайт и копию файла проекта, из которого желательно удалить всё кроме проблемной страницы (если страниц много). По описаниям можно только тратить время на предположения. Одно точно можно сказать - причина кроется в ваших пользовательских ошибках и она не в хэдере, а в основном контенте страницы. С хедером как раз таки всё нормально (судя по описанию). Это не он становится шире, а страница уже :). Больше ничего сказать нельзя без сабжа.

Нет, сами страницы как раз таки в порядке, опять же с компьютера все на месте, ничего не становится шире/уже. И элементы шаблона (хедер/футер) и элементы страницы на своем месте, заменяются при прохождении точек остановки корректно. Но именно на мобильном устройстве – смартфон/планшет – съезжает. 
При этом нет "проблемной страницы". Такая проблема на всех страницах, так как ко всем страницам применен этот шаблон. Наполнение страниц везде находится в рабочей области, именно в размеченных линейках. И опять же увеличивается только хедер, футер и все остальные элементы корректно отображается во всех тч.остановки и устройствах. 
На скрине футер, который нужного размера, в то время как хедер шире окна браузера. Возможно виноват и не хедер, но что-то в шаблоне. Который кроме футера и хедера ничего больше не имеет. Прикрепляю так же проект. Оставил шаблон и одну из страниц. 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
48 минут назад, Александр Архипов сказал:

Наполнение страниц везде находится в рабочей области, именно в размеченных линейках.

Никогда ничего не держите справа от сайта, даже целевые окна лайтбоксов. Переместите налево и после этого вообще скройте целевые окна (сделайте это во всех точках остановки). Это и есть причина.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
 
После
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

........

Дополнительно. У вас в проекте нет никакого смысла в больших точках остановки - только лишняя тяжесть для сайта.. Удалите самую большую, а следующую уменьшите до вменяемого размера ( в шаблоне тоже).

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0

Еще, на мобильных разрешениях удалите анимацию эффекты прокрутки и закрепление. Это хорошо работает только на андройде и лисе. На всех остальных устройствах и браузерах могут быть проблемы.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0

По поводу лайтбоксов странное правило, не знал, спасибо. Но проблема все равно не в них. :D
Но уже и не в сайте, видимо, потому что я зашел к вам и у меня там такая же проблема, прикрепил скрин.

При этом такая проблема с 2х смартфонов Xaomi Redmi Note 3 pro и 4, оба с Chrome'а.
Сейчас попробую поставить лису, посмотрим.
Лайтбоксы все перетащил и убрал их отображение при редактировании. Анимации на мелких точках остановки нет, они только с 720 начинаются.
=====================
С Лисы все ок. 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
3 часа назад, Александр Архипов сказал:

По поводу лайтбоксов странное правило, не знал, спасибо. Но проблема все равно не в них.

И в них тоже.

3 часа назад, Александр Архипов сказал:

Анимации на мелких точках остановки нет, они только с 720 начинаются.

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

3 часа назад, Александр Архипов сказал:

Но уже и не в сайте, видимо, потому что я зашел к вам и у меня там такая же проблема, прикрепил скрин.

Эта проблема уже носит не глобальный характер, а в рамках браузера Хром. Может возникать например из за таких вещей - когда объект растянут на ширину страницы или около того, поверх объекта растянутого на ширину браузера. Определяется только методом тыка.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
 
А если делать под мобилки Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке., то такой проблемы не будет.

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...