Отзывчивый пользовательский интерфейс, добавляющий контент в контрольные точки

Question

Я пытаюсь найти оптимальные методы добавления контента по мере расширения экрана.

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

Но что, если я хочу иметь больше контента на экране, поскольку область просмотра становится больше?

Bootstrap 4 имеет Responsive utilities, который может скрывать элементы в определенных точках останова. Но это неправильно. Элементы скрыты.

Тогда есть новый Угловой Flex Layout, где вы можете получить код, отвечающий на события точки останова. Это похоже на решение, но должен быть другой способ справиться с этим.

Я решил использовать ngIfMediaQuery, это тонкая обертка вокруг API window.matchMedia, очень проста в использовании.

<div *ngIfMediaQuery="'(min-width: 500px)'"> 
    ... 
</div> 

Answer 1

Я думаю, что большинство людей используют эквивалент показать/скрыть утилиты Bootstrap, потому что это просто и легко для дизайнеров и интерфейсных дэвов к ГРКАМ. Вы правы; это загрузка вещей, которые не нужны клиенту. Он работает для выключения URL-адресов фонового изображения, но не на самом деле ничего другого.

На переднем конце js вы можете ajax или иным образом запрашивать скрипты, стили и содержимое только после проверки размера видового экрана или пользовательского агента. Например, ajax в этом великолепном боковом теге-облаке, помещая его внутри функции, которая запускается или не запускается на основе размера видового экрана (и повторно проверяется на событиях в окне просмотра). Это, вероятно, самый гибкий метод и может быть таким же простым или сложным, как вы хотите это сделать - хотя это будет не так просто, как просто отбрасывание hidden-xs в вашу разметку.

Вы можете выполнить это на заднем конце в тандеме, используя скрипт переднего конца, задающий параметр session/cookie. Насколько я знаю, нет стандартного способа для достижения этого, и это, очевидно, менее чувствительно к изменениям в видовом экране, например, переключению между пейзажем/портретом. Amazon делает это, и я уверен, что он основан на пользовательском агенте.

Большое внимание во всем этом - SEO. Вы хотите удостовериться, что Google не получает лицо от js и ничего больше. They wrote a nice article on all of this, и вам, вероятно, стоит почитать его. Например, если вы собираетесь обслуживать разные js на основе пользовательского агента, они рекомендуют добавлять HTTP-заголовок, который сообщает google, чтобы попытаться обходить сайт с помощью разных пользовательских агентов.