Сложность в переводе Strava Iframe (CSS / HTML) - PullRequest
Новая
       19

Сложность в переводе Strava Iframe (CSS / HTML)

0 голосов
/ 24 мая 2019

ОБНОВЛЕНИЕ:
Идея, лежащая в основе моих попыток, до сих пор была сосредоточена на настройке контейнера iframe и его исправлении в соответствии с внутренним соотношением Iframe таким образом, чтобы оно реагировало на изменение пропорциональносодержимое также будет меняться пропорционально.Это не похоже на работу, так как некоторые элементы iframe остаются фиксированными.Я бы очень хотел иметь отзывчивый Strava Iframe, но по какой-то причине не могу этого достичь.Я сделал Codepen Collection с текущими попытками на данный момент.

Я недавно добавил шорткод для встраивания Strava фреймов в мой сайт Гюго (академическая тема).На настольных компьютерах устройства iframes корректно отображаются и в браузерах реагируют, но на мобильных устройствах это не так.Рассматриваемый вопрос можно увидеть на этой веб-странице и моем репозитории GitHub .Я был бы очень признателен за любую помощь в решении этой проблемы.

Я пробовал несколько пробных настроек и вариантов CSS, рекомендованных на форуме Hugo и в других онлайн-источниках.

Текущий шорткод: 

{{ if and (.Get "id") (.Get "hash") }}
<div class="responsive-object">
<iframe height='405' width='590' frameborder="0" allowtransparency='true' scrolling='no' src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}

Текущий CSS: 

.responsive-object iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-object {
  position: relative;
  padding-bottom: 67.5%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}```

Despite trying to make the iframe container responsive, the same result occurs where it seems responsive on desktop browsers yet not on mobile devices. I am unsure of how to proceed from this point, or if I am missing something.

1 Ответ

0 голосов
/ 24 мая 2019

Вы добавляете <meta name="viewport" content="width=device-width, initial-scale=1.0">

к вашему <Head>?

Если да, я собираюсь отредактировать мой пост с решением:)

РЕДАКТИРОВАТЬ

Лучшая статья о создании адаптивных фреймов, которую я нашел до сих пор, - Как создать адаптивный фрейм-фрейм - это просто! .

Существуют три существенных момента:

  1. Не устанавливать атрибуты в открывающем теге iframe, в частности, не ширина и высота

  2. Поместите контейнер div вокруг iframe и используйте CSS height: 0 ;а затем padding-bottom: nn%; , чтобы задать для контейнера высоту, выраженную как отношение высоты: ширины в процентах.

  3. Введите div в строке -webkit-overflow-scrolling: прикосновение и переполнение: авто , которые необходимы для обработки прокрутки на мобильных устройствах и нестабильны в CSS.

Этот код работает для меня:

// HTML (в блоке встраивания, а не в блоке кода) 

<div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">

 <iframe src="http://www.targetWebsiteURL.com"> <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe>

 </div>

// CSS 

.iframe-container { position: relative; margin: 5px; height: 0; overflow: hidden; }

.iframe-container-for-wxh-500x350 {
padding: 25px 25px 70% 25px; /* padding-bottom = h/w as a % */
}

.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px inset #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */

} ИспользоватьОтдельный класс для стиля padding-bottom , так что, если у вас есть более одного iframe, и они имеют разные отношения wxh, все, что вам нужно сделать, это кодировать класс для каждого и установить padding-внизу в разные проценты.

...