Нужно ли всё ещё сбрасывать auto-отступы на мобильных устройствах?

Внести вклад UX
1

На мобильных устройствах здесь сбрасываются автоматические отступы для обертки main-outlet:

Из-за этого при объявлении -d-max-width в теме макет выравнивается по левому краю. На узких устройствах это незаметно, но на планшетах в ландшафтном режиме возникает проблема, например, с темой Air:

The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)
The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)1746×1257 271 KB

Я вижу, что это объявление было добавлено из-за:

В целом сейчас я не вижу проблемы в списках тем. Возможно, это объявление можно убрать? Или, если есть какие-то конкретные случаи, лучше назначить его для определённого брейкпоинта?

3 лайка
2

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

Однако обратите внимание: вы видите мобильную версию на планшете, что больше не является настройкой по умолчанию для iPad. Планшеты iPad по умолчанию используют десктопную версию и поэтому не загружают мобильные таблицы стилей. Это планшет на Android?

3 лайка
3

Да, это планшет на Android.

2 лайка
4

Склонен сказать, что по умолчанию использовать мобильный user-agent — это неправильный выбор для браузера на планшете в ландшафтном режиме (да и в портретном, честно говоря). Не уверен, это Chrome или другой браузер: в некоторых случаях Chrome по умолчанию переходит в режим рабочего стола: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 лайк
5

Я могу воспроизвести это на iPad и Android-планшете, хотя на Android проблема выражена сильнее из-за соотношения сторон:

На изображении показан скриншот веб-сайта Discourse с приветственным сообщением и разделом вакансий. (Подписано ИИ)
На изображении показан скриншот веб-сайта Discourse с приветственным сообщением и разделом вакансий. (Подписано ИИ)1920×1200 208 KB

Редактирование: На самом деле эта проблема не возникает на iPad, я проверил, и там всё выглядит нормально

2 лайка
6

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

Как насчёт просто добавления объявления брейкпоинта?

@include breakpoint(mobile-extra-large) {
  #main-outlet-wrapper {
    margin-left: unset;
    margin-right: unset;
  }
}

Так на узких мобильных устройствах лишнее пространство будет убрано, а на более широких устройствах обёртка будет отцентрована.

3 лайка
7

Вариант breakpoint(mobile-extra-large) мне кажется логичным. Интересно также, что по этому поводу думает @awesomerobot.

2 лайка
8

Я пробовал с набором очень кастомных тем, и я не думаю, что нам это вообще нужно… через несколько месяцев после добавления обертка была установлена в режим сетки с width: 100%;, так что в теории это должно полностью предотвратить возникновение исходной проблемы.

Удаляю это здесь:

Спасибо за расследование!

5 лайков