Больше никаких переключаемых мобильных/десктопных макетов?

Привет! Я перешёл с ветки stable на последнюю esr, и, похоже, больше нет возможности явно переключаться между мобильной и десктопной версией? В левом нижнем углу боковой панели я больше не вижу переключателя, а параметры ?mobile_view=1 / ?mobile_view=0 больше не работают. Теперь переход от десктопного режима (с боковой панелью и гамбургер-меню слева) к мобильному (без боковой панели и с меню справа) происходит автоматически при горизонтальном изменении размера окна браузера. Получается, что теперь всё зависит только от ширины браузера? Раньше можно было при желании использовать упрощённую мобильную версию на планшете с широким экраном или, наоборот, включать десктопный режим (с более подробным списком тем, например) на телефоне с небольшим экраном или в узком окне браузера, если пользователю это было удобнее.

2 лайка

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

5 лайков

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

Классический пример — установка разных стартовых страниц для мобильных устройств и настольных компьютеров; сейчас это сделать невозможно.

По моему мнению, это потребует гораздо более динамичного подхода к созданию шаблонов.

3 лайка

Спасибо за ответ. В принципе это имеет смысл, но на практике это создаёт определённые трудности для более продвинутых и активных пользователей. Как я уже упоминал, в режиме сокращённого отображения в списке тем видно гораздо меньше информации, особенно по сравнению с десктопной версией, например, как на Sam's Simple Theme. Поэтому некоторые пользователи предпочитали принудительно включать десктопный макет, и даже в этом случае он корректно адаптировался, помещаясь по горизонтали без переполнения.

2 лайка

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

Это полезно, потому что устройства стали менее предсказуемыми: телефоны могут разворачиваться в планшеты, ноутбуки могут превращаться в планшеты, клавиатуру и мышь можно подключить к стольким устройствам…

Если вы привыкли к старому подходу, то новый может показаться другим, но всё, что вы делали в инициализаторе, скорее всего, всё ещё возможно — и при этом более отзывчиво к изменяющимся возможностям.

Теперь это возможно: подход стал более детальным, и вы условно показываете или скрываете контент внутри одного шаблона, а не заменяете его целиком. Например, теперь в нашем сервисе возможностей есть объект viewport…

В шаблоне…

{{#if this.capabilities.viewport.lg}}
  Контент для больших экранов
{{/if}}

{{#if this.capabilities.viewport.sm}}
  Контент для очень маленьких экранов
{{/if}}

или в JS…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "короткий контент";
  } else {
    return "очень-очень длинный контент";
  }
}

А в CSS вы можете использовать те же контрольные точки, например…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 лайков

Конечно, я в курсе этих замен.

Однако я с нетерпением жду, когда такие подходы станут применяться более фундаментально.

Например, если на десктопной версии моей главной страницы отображаются категории, то я должен видеть список тем.

Список тем, по логике вещей, должен отображаться и на мобильных устройствах… В текущем виде элемент списка тем теряется.

Именно поэтому существовал TC «Принудительная мобильная главная страница»…

Надеюсь, я объясняюсь понятно…

4 лайка

Да, это логично. Думаю, мы будем постепенно вносить подобные поддерживающие изменения… Просто это непросто, когда мы построили так много, используя старые подходы, и должны поддерживать их так, чтобы это не сразу ломало кастомизацию.

5 лайков

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

Поэтому я, наверное, всё ещё немного запутался: что именно изменилось? Была ли просто удалена кнопка переключения :desktop_computer: / :mobile_phone: из боковой панели? Можно ли вызвать тот же метод JS с помощью пользовательского скрипта или что-то в этом роде? Или же произошли изменения в коде разметки для настольных компьютеров, из-за которых она больше не будет адаптивно подстраиваться под меньшую ширину окна браузера?

Похоже, что переключатель «Версия для ПК» в браузере (проверено в Chrome и Firefox на Android-планшете) принудительно включает старую разметку, которая ранее соответствовала собственному переключателю :desktop_computer: / :mobile_phone: в Discourse, и она по-прежнему адаптивна без переполнения. Однако текст, кажется, стал намного меньше, чем я помню.

Я также знаю, как выбирать определённые контрольные точки по ширине, например @media screen and (max-width: 1000px) {… но не уверен, можно ли что-то сделать там с помощью переопределений CSS.

1 лайк

Я согласен с этим. Мне никогда особенно не нравилась мобильная версия на телефоне: она кажется гораздо более ограничивающей, и всё выглядит слишком крупно, если не уменьшить масштаб примерно вдвое. Я всегда использовал здесь десктопную версию, пока буквально не стал не в состоянии.

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

1 лайк

Нет, он не просто убран из боковой панели. Мы удалили базовую структуру для переключения.

3 лайка

Это значит, что Force Mobile Homepage нужно пометить тегом broken?

1 лайк

Я пометил это как неработающее.

Вот почему:

2 лайка

Итак, чтобы предотвратить возврат к упрощенной мобильной разметке при нормальных вертикальных ширинах планшета, могу ли я использовать что-то вроде этого в CSS: @media screen and (max-width: 700px) {

Или переключатель «Версия для ПК» в мобильном браузере — это единственный вариант, который можно рекомендовать пользователям?

Могли бы они протестировать использование «Запросить версию для ПК» вместе с увеличением размера шрифта в https://meta.discourse.org/my/preferences/interface?

Привет, спасибо за ответ.
Один пользователь попробовал переключатель «Версия для ПК» в браузере, но сообщил, что это не помогло. На моём планшете интерфейс действительно меняется на полноценную версию для ПК, но даже при настройке «Максимальный» текст едва достаточно велик. При этом нецелесообразно задавать это в настройках пользователя, так как на других устройствах, например на ПК, использующих ту же учётную запись, текст становится слишком крупным.

2 лайка

Вам не нужно использовать одинаковый размер шрифта на всех устройствах.

1 лайк

Хм, не уверен, почему у меня нет такой опции?

Полагаю, «обычный» — это ваш текущий выбор по умолчанию. Вы пробовали выбрать что-то другое?

2 лайка

Ох, конечно. :wink: Спасибо, это немного помогает, я полагаю.

Честно говоря, не помню, как работало масштабирование размера шрифта в старом явном режиме для рабочего стола на экране с меньшей вертикалью, но мне кажется, что в целом они были крупнее. Возможно, придется добавить некоторые переопределения CSS для настройки «Самый большой»…

1 лайк