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

Question

[PinocioCORP]

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


Ссылка на пациента
Есть сайт, на нем все более или менее по фронтенду нормально.
Но! Есть одна не приятная черта. Стоит открыть на любом стандартном браузере любого андроида, сайт адаптируется как нужно, только оставляя пространство справа стремящееся к бесконечности.

Comments

[Владислав Лысков]

ванги в запое, где ссылка на пациента?

[Павел Антонов]

смотри ширину у body и вложенных контейнеров, где-то она указана фиксированно

[PinocioCORP]

У меня с яндекса на андроиде тоже все ок.
А вот если открыть в стандартном? Который называется "Браузер"?

[Rustam Bainazarov]

С моего телефона всё в порядке (Chrome 71). По горизонтали нет прокрутки.

[PinocioCORP]

Владислав Лысков, ссылку добавил.

[PinocioCORP]

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

[PinocioCORP]

SmthTo, косяк только на обычном/встроенном/предустановленном/стандартном браузере андроида. Только в нем.

[Rustam Bainazarov]

PinocioCORP, ну тогда тут сказать сложно. Какая оболочка? Стандартный браузер Android, считай тот же Chrome в нетронутом виде.

Если какая-нибудь MIUI — это уже другая история. Там действительно другой браузер, который может быть основан на Chromium, но с кучей переделок.

[PinocioCORP]

SmthTo, конкретно у меня xiaomi, с него скриншот.
А девушка которая заметила "косяк" говорит что и на каких-то айфонах тоже не отображается.
Я не знаю как исправлять это. Надеялся на "экспертное" мнение, может кто сталкивался.
Я даже представления не умею что это может быть.

Я даже до такого докатился. Один фиг.

@media only screen and (min-device-width : 240px) and (max-device-width : 480px) {
  body{
    max-width: 100vw;
    overflow-x: hidden;
  }
}

[PinocioCORP]

SmthTo, сайт без JS вообще не отображается.
Может в нем где косяк?
Может что-то не так лепится?
Есть какой-нить вариант с отловом данного косяка?

[Rustam Bainazarov]

PinocioCORP, нет экранов меньше 320 пикселей. Косяк в JS тоже может быть.

Активируйте USB-отладку на телефоне, откройте проблемный браузер и попробуйте через Chrome на ПК сделать отладку через режим разработчика. Если там, конечно, этот браузер вообще отобразится. Стандартный браузер иногда можно отладить через Chrome, иногда нет. Видимо, должна быть совместимость с ним, если разработчики отдельной прошивки что-то меняют и делают какой-то отдельный браузер, хоть и основанный на Chromium.

[PinocioCORP]

SmthTo, Почти бексонечно вправо не проматывается, но история та же.
А еще безумно все медленно и лагано.

[PinocioCORP]

Вообщем был мой косяк за невнимательность.
Так было...

<div class="j-block__mobile">
	<a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
	    Каталог
	</a>
	<a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
	    Меню
	</a>
	<!-- вырезано -->
</div>

Так стало...

<div class="j-block__mobile">
	<a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
	    <span>Каталог</span>
	</a>
	<a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
	    <span>Меню</span>
	</a>
	<!-- вырезано -->
</div>

В адаптиве не правильно срабатывал display: none на эти элементы, в итоге, оформив текст в span
а в css прописав от греха подальше

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body{
    max-width: 100vw!important;
    overflow-x: hidden!important;
  }
  .j-block__mobile{
  max-width: 100%;
  }
  .j-button.j-button__mobile>span{
    display: none;
  }
}

Добился результата, что теперь все нормально.

Answer 1

[PinocioCORP]

Вообщем был мой косяк за невнимательность.

Проблема в отработке "Бургера" была. Не все элементы на мобилке скрывались.
Так было...

<div class="j-block__mobile">
	<a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
	    Каталог
	</a>
	<a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
	    Меню
	</a>
	<!-- вырезано -->
</div>

Так стало...

<div class="j-block__mobile">
	<a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
	    <span>Каталог</span>
	</a>
	<a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
	    <span>Меню</span>
	</a>
	<!-- вырезано -->
</div>

В адаптиве не правильно срабатывал display: none на эти элементы, в итоге, оформив текст в span
а в css прописав от греха подальше

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body{
    max-width: 100vw!important;
    overflow-x: hidden!important;
  }
  .j-block__mobile{
  max-width: 100%;
  }
  .j-button.j-button__mobile>span{
    display: none;
  }
}

Добился результата, что теперь все нормально.

Answer 2

[FeST1VaL]

Как вариант можно было использовать Дбаг браузера телефона через компьютер и посмотреть что уезжает

Comments

[PinocioCORP]

Можете скинуть какую-нить ссылочку на полезную статейку об этом?
Просто как-то даже не додумывался до того что так можно.

[FeST1VaL]

PinocioCORP, Ну это работает только с Android помоему ну и с только с Google Chrome... https://developers.google.com/web/tools/chrome-dev...