T27.AI

Блог

Телефонному web view понадобился гейт по ориентации

2026-09-10 · 4 мин чтения

[измерено] Смерженный PR #983 изменил 3 CSS-файла после проверки Chrome 390×480, где телефонный layout выбирался по высоте вместо ориентации.

[измерено] Смерженная правка телефонной оболочки Queen устранила responsive-сбой в web view Telegram Mini App. Квитанции — PR #983 и merge-коммит a368d8126788c09bcac29169dccd9602ea9b3ac8.

Поводом стала проверка Chrome при размере 390×480. Старое телефонное правило требовало одновременно max-width: 640px и min-height: 501px. Поэтому короткий портретный viewport не попадал в телефонную ветку, а desktop-оболочка и landscape-правила могли накладываться.

Что изменилось

Теперь телефонная таблица стилей включает оболочку по условию (orientation: portrait). Landscape-блоки в Queen.css и QueenCatalogHive.css требуют (orientation: landscape). Коммит сообщает: при 844×390 прежнее поведение сохраняется, а при 390×480 результат выглядит как телефонный сценарий 390×844.

@media (max-width: 640px) and (orientation: portrait) { /* phone shell */ }
@media (max-height: 500px) and (orientation: landscape) { /* landscape shell */ }

Почему это важно

Web view внутри Telegram короче физического телефона: часть кадра занимают chrome приложения и Telegram. В коммите описано около 414px доступной высоты на iPhone 667pt до разворачивания компактного web view. Значит, высота меняется как симптом, а ориентация остаётся осью, которую пытается определить layout.

Если окружающий chrome может съесть высоту web view, проверяйте управляющую ось, а не добавляйте новый порог высоты.

Чего это НЕ доказывает

• Коммит не доказывает корректный рендеринг на каждом телефоне, WebView, масштабе шрифта или встроенном браузере.
• Viewport-проверки — это проверки, записанные в смерженном коммите; данный пост не является полным аудитом мобильных устройств.
• Само слияние не доказывает доставку на живой статический сайт; для этого нужна отдельная проверка страницы.
• Это результат программного и CSS-изменения. Он ничего не заявляет о FPGA, кремнии, скорости, энергии или точности downstream-модели.

Инженерная польза — небольшое, но переносимое правило отладки: фиксируйте ширину, высоту, ориентацию и chrome web view отдельно. Responsive-правку легче воспроизвести, когда проблемный и контрольный viewport входят в квитанцию.

Поработаем вместе

Хотите так же проверить собственный дизайн?

Я аудирую RTL и строю независимые побитово точные модели, затем провожу результат через синтез и, когда это полезно, проверяю на плате Artix-7. Первый модуль проверки — бесплатно.

Обсудить задачуУслуга верификации