Делаем Bandcamp iframe отзывчивым - проблемы с центрированием и переполнением - PullRequest
Новая
       15

Делаем Bandcamp iframe отзывчивым - проблемы с центрированием и переполнением

1 голос
/ 10 июня 2019

Я хотел бы иметь отзывчивый iframe Bandcamp, использующий только CSS, как описано здесь (и во многих других местах). Тем не менее, 2 вопроса:

  1. Если я увеличу мою страницу до ширины более 700 пикселей, контейнер iframe начнет расширяться больше, чем способен iframe Bandcamp. Это приводит к уменьшению текста ниже, в то время как iframe остается того же размера

  2. Контейнер не центрируется, когда я достигаю этого предела.

Я думаю, что логичным решением будет как-то установить параметр, когда устройство, просматривающее страницу, имеет ширину> 700 пикселей, чтобы фрейм не отвечал, например, 

if screen-width > 700px
   .responsive {
      width: 700px;
      ...
   }
else
   .responsive {
      width=100%;
      ...
   }

Есть ли способ сделать это? Или, может быть, более элегантное решение?

Вот скрипка: https://jsfiddle.net/zg2cL06s/1/

1 Ответ

0 голосов
/ 10 июня 2019

Решение 1: max-width

Самый быстрый способ ограничения ширины вашего фрейма без изменения чего-либо еще - добавить свойство max-width: 

.responsive iframe {
  max-width: 700px;
}

Вот обновленный Fiddle , демонстрирующий подход с максимальной шириной.

Решение 2: Медиа-запрос

Еще один способ сделать это - использовать медиа-запрос.

Вы бы добавили что-то вроде этого, чтобы ограничить ширину до 700px, если ширина экрана превышает 700. 

@media only screen and (min-width: 700px) {
  .responsive iframe {
    width: 700px;
  }
}

Вот Fiddle , демонстрирующий подход медиазапроса.

А вот некоторые ресурсы для получения дополнительной информации о медиа-запросах, которые действительно являются основой адаптивной веб-разработки.

Редактировать: Центрирование

Я пропустил ваше первоначальное требование центрировать iframe.Я обновил обе скрипки с подходом центрирования, который я бы порекомендовал использовать display: flex;. 

.responsive {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Вот некоторые ресурсы для использования гибких стилей:

Примечание о iframes

Хотя вы можете делать некоторые умные вещи с помощью iframes, вы должны знать, что вы не сможете по-настоящему отзывчиво работать со встроенным iframe, еслиВы также управляете кодом внутри фрейма.Другими словами, без явного сообщения, отправляемого со страницы, загруженной в iframe (что почти никогда не происходит, если вы не создали страницу, отображаемую в iframe, а также не создали механизм для отправки сообщений назад и вперед), или без некоторыхЕсли серьезно, то для родительской страницы не существует очевидного / чистого способа узнать что-либо о контенте внутри iframe.Поэтому для всех намерений и целей невозможно (насколько я знаю) рассчитать размер содержимого iframe для размещения родительской страницы.В вашем примере с Bandcamp родительская страница не может узнать, какой должен быть размер iframe Bandcamp в любой момент времени, чтобы в нижней части содержимого iframe не было пустого пространства.Это просто печальная реальность того, как работают фреймы и политики безопасности браузера.

Надеюсь, это поможет.Удачи!

...