Адаптивность HTML5 на мобильных браузерах
 

Всем привет. Я не программист. Пробую экспортировать в Adobe Animate c интерактивными элементами на JS в HTML5.

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

Прошу профессионалов подтвердить или опровергнуть мои иллюзии))

Вот ссылка на мой интерактивный эксперимент:
https://hardlexx.github.io

p.s. четвёртый выстрел из пистолета открывает мою группу вк, не пугайтесь. это не спам. вы не ЦА. :away:

что значит "как-то не умещает"?

undefined, то есть, при горизонтальном положении устройства кадр формата 16:9 не умещается ровно по краям дисплея, а выходит за его границы.

Это же логично. Оно подстраивается по верхней и нижней границе. Адаптивный - не значит "резиновый". Там либо черные полосы должны быть сверху и снизу, или скрытые края

caseyryan, возможно, всё это логично для программиста. я не он.

а можете ответить менее пафосно и по существу?

Что в моем ответе пафосного?
По существу. Если открыть видео файл снятый на мобилу в вертикальном расположении проигрывателем media player classic, то там есть настройки масштаба, в которых можно выбрать вписывание во внутреннюю часть экрана или во внешнюю. При второй, видео будет на весь экран, а верхяя и нижняя часть уйдет за его пределы, а при первой, справа и слева будут черные полосы. Видео не сжимается и не растягивается. То же самое происходит и здесь. Тут можно еще глянуть, что значит адаптивность под разные экраны. Это по старлингу, но сути не меняет

Cмысл в том,что если пропорции твоего контента отличаются от пропорций экрана (например, экран - 16:9, а контент - 3:4), то при попытке его вписать в экран либо часть контента обрежется,либо появятся пустые полосы по краям.Не знаю как там в html,но во флэше это разруливается свойствами stage.align и stage.scaleMode.Думаю и в js должны быть аналоги.

Добавлено через 13 минут
upd:перечитал - контент тоже имеет пропорции 16:9,значит надо читать что значит "адаптивный" по версии adobe

Добавлено через 1 час 2 минуты
Upd2:скорее всего тебе нужен режим fit in view

caseyryan, undefined, благодарю за ответы.

а вот если, к примеру, на флеше (или на других платформах) разрабатываются игры, то как они адаптируются на сотни устройств?

проблема решается некой универсальной командой из серии "масштабировать под любой экран сохраняя пропорции" или всё сложнее и адаптируется более индивидуально?

Если нужно именно "масштабировать под любой экран сохраняя пропорции" ,то делается в 1-2 строки. Другой вопрос что такое редко когда требуется,тогда надо растягивать все вручную:менять размер всех контейнеров чтоб влезало больше контента, текстовые боксы инпутфилдов увеличивать, чтоб влезало больше текста и т.д.

Универсальное решение описано в статье по Starling, которую привели выше. Дёшево и сердито. Но можно использовать и индивидуальный подход для каждой сцены или элемента, для этого нужно отправить смс на номер отключить автоматическое скалирование и управлять этим процессом вручную. Для этого есть событие изменения размеров стейджа. Подписываемся на событие и настраиваем отображение сцены так как хотим исходя из текущих размеров. Ну а дальше немного разобраться с пропорциями и системой наследования трансформаций дисплей объектов. Это тоже самое, что в html вёрстке называется "резиновый" дизайн, только у нас ещё вдобавок есть плюшки (система наследования трансформаций). К слову, тот упрощенный вариант из статьи или стандартные режимы масштабирования flash - просто изменяют scale и x, y главного контейнера (Stage) и всё.