Как сделать разное количество контента в адаптиве?

Question

[sincopa]

Вопрос заключается в следующем.

Допустим у нас адаптивный дизайн и допустим на мобилках и планшетах надо вывести 2 карточки товара, на десктопе 3 карточки товара, так же у нас есть кнопка загрузить еще.

Получается при загрузке стр узнаем ширину окна (допустим 320 = моб), делаем ajax запрос, получаем json данные и выводим 2 карточки. Отслеживаем изменение окна если она становиться больше 1024 все удаляем, делаем ajax запрос и выводим уже 3 карточки товара.

Так ли это делается? И делается ли вообще так?

Comments

[sim3x]

Так ли это делается?

нет. Показывать желательно один и тот же обьем

И делается ли вообще так?

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

[sincopa]

Так, а если надо реализовать такое, то как? На стороне сервера узнаем с какого устройства зашел юзер и выводим это кол-во карточек? Без всякого отслеживания изменения окна. Это наверное оптимальный вариант будет.

[tendkuh]

sincopa, s3 вам сказал что количество карточек должно быть одинаково, а остальное делается с помощью CSS очевидно

[sincopa]

tendkuh, с кнопкой загрузить еще этот вариант не пойдет

[tendkuh]

sincopa, почему вы на мобильниках и на десктопе хотите показывать разный объём информации?

[sincopa]

tendkuh, я просто хочу разобраться в этом вопросе. Не раз встречал такие макеты. И допустим попался заказчик который пену со рта пускает и говорит хочу вот прям как в макете.

[tendkuh]

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

[inkShio]

tendkuh, а почему "Нравится" не нажал )

[tendkuh]

inkShio, какая разница, оно всё равно ему в копилку не капает, ведь это не ответ

[alex-1917]

tendkuh,

под мобильную версию делать отдельную версию сайта.

2019год на дворе... какие отдельные версии???

[Сергей Рогожкин]

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

[tendkuh]

alex-1917,

2019год на дворе... какие отдельные версии???

[alex-1917]

tendkuh, какой же это ориентир?))) тююю

[tendkuh]

alex-1917, эти сайты в топе самых посещаемых сайтов мира

Answer 1

[Anton]

Делать можно как угодно. В частности как вы описали. С использованием javascript + css.

Обычно делают просто адаптивную верстку, иногда скрывают лишние блоки на мобильных, не думаю что нужно что то удалять при смене размера... это точно не очень правильно. Да и закешировать страницу будет неудобно, + сео если страница посадочная. Обычно страница должна быть одинаковая по содержимому и на мобильном и на компьютере, просто нужно менять/скрывать ненужные блоки. Например на широком экране показывать 3 в ряд, а на узком 1 в ряд, но все равно 3.

Answer 2

[Alex]

Как и написали вам в комментариях: адаптивный дизайн, подразумевает изменение способа отображения контента, чтобы он был удобно доступен на разных форм факторах. Но не подразумевает изменение самого контента.

И если вам попадётся такой заказ — убеждайте дизайнера что он не прав.

Тем не менее, ситуации бывают всякие, и ваш случай не совсем типичный. Я быреализовал следующим образом:

1. Обратится к серверу, загрузить информацию для сколько то карточек, скажем для 10.
   
2. Посмотреть на ширину экран.
   
3. Вывести 2 или 3 карточки в зивисимости от формфактора. Остальное оставить в памяти.
   
4. По клику на "загрузить еще" достаём ещё 2-3 карточки из памяти и отображаем.
   
5. Если карточки в памяти кончаются — сделать запрос на сервер и загрузить ещё 10.
   

Comments

[tendkuh]

По клику на "загрузить еще" достаём ещё 2-3 карточки из памяти и отображаем.

он же написал что "4 пункт" с кнопкой "Загрузить ещё" ему не подходит

Answer 3

[alex-1917]

я просто хочу разобраться в этом вопросе. Не раз встречал такие макеты. И допустим попался заказчик который пену со рта пускает и говорит хочу вот прям как в макете.

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

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