У меня есть iframe на тестовом веб-сайте, и он немного странный на экранах меньшего размера, добавляя черные рамки.
Все размеры экрана с шириной, превышающей 792 пикселя, являются идеальными, но при этом разрешении они не соответствуют.
Я измерил требуемую высоту iframe на основе ширины экрана некоторых мобильных устройств и получил следующий список:
Ширина экрана: 320px, тогда высота iframe должна быть: 135px
Ширина экрана: 375 пикселей, тогда высота iframe должна быть: 166 пикселей
Ширина экрана: 384px, тогда высота iframe должна быть: 171px
Ширина экрана: 411 пикселей, тогда высота iframe должна быть: 186 пикселей
Ширина экрана: 414 пикселей, тогда высота iframe должна быть: 188 пикселей
Ширина экрана: 768 пикселей, тогда высота iframe должна быть: 387 пикселей
Ширина экрана: 792 пикселя, тогда высота iframe должна быть: 395 пикселей
Однако я не уверен, как мне определить соотношение сторон и автоматически установить высоту iframe на правильное значение ...
Конечно, я мог бы пройти и найти все эти точки останова для каждого устройства, но наверняка должен быть более простой способ регулировки высоты по соотношению сторон / соотношению сторон?