Почему на айфоне происходит скролл, а на андроиде нет?

Question

[Miriam4ik]

Может быть ошибка в этих стилях и как это изменить?

body {
    text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
    min-height: 100%;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    overflow: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Comments

[Noder SS]

Можно хотя бы скрины? Можете попробовать поменять min-height на max-height, если это обозначение скрола

Answer 1

[Артем]

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

Однако, в представленных стилях есть свойство overflow: auto;, которое определяет, как будет обрабатываться содержимое, выходящее за пределы элемента, к которому это свойство применено. Если это свойство установлено на auto, то браузер самостоятельно определяет, должно ли появляться полоса прокрутки или нет. Это может привести к различному поведению скролла на разных устройствах.

Если вы хотите, чтобы на всех устройствах отображалась полоса прокрутки, можно установить свойство overflow: scroll; вместо overflow: auto;. Однако, имейте в виду, что это может привести к отображению нескольких полос прокрутки на устройствах с маленькими экранами, что может быть неудобно для пользователей.

Кроме того, если у вас есть контент, который выходит за пределы экрана, вы можете добавить height: 100%; в стили для элемента html, чтобы убедиться, что он занимает всю доступную высоту экрана.