Проблема переполнения временной шкалы в Твиттере в браузере на iPhone - PullRequest
Новая
       41

Проблема переполнения временной шкалы в Твиттере в браузере на iPhone

0 голосов
/ 28 октября 2018

Я работаю на своем личном веб-сайте и хочу показать свою коллекцию твитов из своего профиля в Твиттере, используя встроенный код, предоставленный Твиттером.Встроенный код прекрасно работает на ПК (см. Второй скриншот), но на iPhone он переполняет родительский контейнер.Я даже пытался поместить его в div и дать фиксированный размер ширины, но это не сработало.

Я думал, что проблема в браузере Safari в iPhone, поэтому я протестировал его в браузере Chrome (в iPhone), но проблема сохраняется.Поэтому я думаю, что это проблема iOS / iPhone.

Я попытался найти ответы в сообществе разработчиков Twitter, и я нашел ветку ( см. Здесь ), в которой упоминается та же проблема, но нетбыло предоставлено решение.

(см. ниже снимок экрана компьютера, который работает очень хорошо, как и ожидалось)

twitter embedded timeline works fine on pc

(см. снимок экрана iPhone нижес вопросом)

twitter embedded timeline overflow issue on iPhone

См. ниже код 

<div class="container-fluid row m-0 pr-0 pl-0">
    <div class="col-md-8 pl-0 pr-0">
      <app-nav-section-display></app-nav-section-display>
    </div>
    <div class="col-md-4 mt-2 pr-0">
        <a class="twitter-timeline " data-partner="tweetdeck" href="https://twitter.com/paramvirsingh_k/timelines/1056538294912212993?ref_src=twsrc%5Etfw">Curated Tweets - Curated tweets by paramvirsingh_k</a>
    </div>
  </div>

Примечание: <app-nav-section-display></app-nav-section-display> является селектором компонента (угловой 6), которыйздесь отображается текст со светло-зеленым фоном.

Ответы [ 3 ]

0 голосов
/ 24 марта 2019

Попробуйте это исправление CSS: 

-webkit-overflow-scrolling:touch
overflow: auto
0 голосов
/ 08 июля 2019

В последнее время мы обнаружили, что довольно новый генератор кода Twitter для встроенных временных шкал профиля на publish.twitter.com по-прежнему создает проблему временной шкалы, переполняющей ширину контейнера для устройств iOS, особенно с шириной и высотойнастройки (и без ограничения data-tweet-limit).

В настоящее время мы решаем эту проблему с помощью добавленного CSS (с селектором, которому может предшествовать ваша дополнительная специфичность, если необходимо):

.twitter-timeline { width: 100vw !important; }

Обратите внимание, что вы также хотите убедиться, что область просмотра установлена, возможно, так (но в зависимости от вашей реализации):

<meta name="viewport" content="width=device-width, initial-scale=1">

Старыйshrink-to-fit=no Хак больше не имеет никакого эффекта в современной iOS

0 голосов
/ 20 ноября 2018

Я решил эту проблему и сумел получить желаемое поведение.Я отвечаю, чтобы это могло помочь сообществу в будущем.

Вы должны использовать атрибуты data-height и data-width, которые предоставляет Twitter API.Теперь, поскольку я хотел, чтобы он был отзывчивым, я не хотел использовать фиксированный размер, поэтому я попытался задать значение data-width как 100%, ожидая, что оно автоматически отрегулирует ширину родительского контейнера, но это не так.

Так что мне пришлось манипулировать атрибутом data-width, чтобы как-то настроить размер родительского контейнера.Я сделал это, получив nativeElement, соответствующий этому элементу twitter, и динамически установив атрибут data-width, который вы можете получить из ширины контейнера, используя тот же способ, но на этот раз для nativeElement контейнера div.Это делается в машинописном тексте на Angular 6. См. Ниже сценарий типа компонента, содержащего тег twitter: - 

import {AfterViewInit, Component, ViewChild, ElementRef, HostListener} from '@angular/core';

@Component({
  selector: 'app-content-container',
  templateUrl: './content-container.component.html',
  styleUrls: ['./content-container.component.css']
})
export class ContentContainerComponent implements AfterViewInit {

  @ViewChild('twitterBarContainingDiv')
  twitterBarContainingDiv: ElementRef;
  @ViewChild('twitterBar')
  twitterBar: ElementRef;
  constructor() { }

  ngAfterViewInit() {
    this.adjustTwitterBarWidth();
  }
  @HostListener('window: resize')
  public onResize(): void {
    this.adjustTwitterBarWidth();
  }
  public adjustTwitterBarWidth(): void {
    // console.log('twitterBarContainingDiv width:' + this.twitterBar.nativeElement.getAttribute('data-width'));
    this.twitterBar.nativeElement.setAttribute('data-width', this.twitterBarContainingDiv.nativeElement.clientWidth);
    console.log('twitterBar width:' + this.twitterBar.nativeElement.getAttribute('data-width'));
  }
}

См. Ниже HTML-код для соответствующего компонента: - 

<div class="pr-2 pl-2">
  <app-name-header></app-name-header>
  <app-primary-nav></app-primary-nav>

  <div class="container-fluid row m-0 pr-0 pl-0">
    <div class="col-md-9 pl-0 pr-0">
      <app-nav-section-display></app-nav-section-display>
    </div>
    <div #twitterBarContainingDiv class="col-md-3 mt-2 pr-0 pl-0" >
      <a #twitterBar class="twitter-timeline"  data-height="800"  data-chrome="" data-partner="tweetdeck" href="https://twitter.com/paramvirsingh_k/timelines/1056538294912212993?ref_src=twsrc%5Etfw">Curated Tweets - Curated tweets by paramvirsingh_k</a>
    </div>
  </div>
</div>
...