Скрины с телефона на широком экране
Вертикальный скрин в карточке 16:10 либо обрезается, либо тонет в пустоте. Рамка телефона на размытой копии кадра решает обе проблемы без отдельной вёрстки под каждый скрин.
Telegram Mini App и мобильные приложения удобнее всего показывать скринами с телефона. Обложка карточки при этом широкая, 16:10: если растянуть вертикальный кадр на всю площадь, от интерфейса останется полоска, а если вписать целиком, по бокам будут пустые поля.
Что делает сайт
- Кадр, высота которого больше ширины в 1,3 раза и сильнее, считается скрином с телефона. Отмечать это в админке не нужно.
- Такой кадр встаёт по центру в рамку телефона, а фоном служит его же копия, растянутая и сильно размытая. Для фона берётся крошечный blur-плейсхолдер, который уже есть у каждой картинки, так что лишней загрузки нет.
- Скругления и толщина рамки заданы в единицах
cqiот ширины самой рамки, поэтому телефон одинаково выглядит и в карточке, и в баннере кейса. - В галерее скрины с телефона собираются в отдельную ленту: на телефоне она листается вбок, на десктопе стоит в ряд.
На узком экране баннер кейса с вертикальной обложкой становится выше, 4:5, чтобы телефон в нём был крупным и читаемым.