Оптимизация View и ActionSheet под мобильные браузеры.
 

Добрый день!

Для разработки веб приложения использовал ExtJS 6.2.0 , дабы сделать его мультиплатформенным - modern toolkit. Однако при тестировании приложения (ни какие тесты не писали, тупо открываю на мобильных устройствах) выясняется что оптимизация под ios и android весьм и весьма условна:

• При открытии в safari или chrome , соответсвенно на ios возникает следующая проблема: Safari несколько раз перезагружает страницу, а затем сообщает problem occurred with this webpage so it was reloaded. Страница загружается на секунду, затем обновляется, далее ошибка. Тоже самое по сути в chrome на ios, а значит дело не в safari..

• При открытии в android объекты действительно сидят со значением "fit" и юзабительны, но шрифты слишком мелкие как внутри кнопок так и в элементах (например actionSheet), выпадающий список принимает мобильный вид, но расположен достаточно убого и все очень мелко. Замечается также некоторая медлительность работы приложения в мобильном браузере. POST и GET запросы работают. В мобильном эмуляторе дебагера chrome все ок...

В связи с изложенным вопросы:

• Как можно решить проблему с оптимизацией под ios браузеры?

• Какие конфы/параметры классов Ext JS (actionSheet, form button) определяют размер объектов, размер шрифтов , layout (расположение имею ввиду) элементов на дисплее мобильного устройства? Или все по умолчанию и для оптимизации нужно прописывать некое логическое условие а с шрифтами бороться в css?

Спасибо!

PS ios 12.0; android 7 и 8

А можно как то примеры увидеть что не так со шрифтами?

С ios браузерами проблем нет (тоже целевая платформа это ios 12). Что касается шрифтов, то тоже проблем не замечено. Создаете свою тему на базе material темы, и изменяете соответствующие переменные в sass/vars ответственные за размер шрифтов всего приложения.