Question

我正在我的个人网站上工作，并希望使用twitter提供的嵌入式代码从我的twitter个人资料中显示我的tweets集合。嵌入式代码在PC上工作正常（请参阅第二个屏幕截图），但在iPhone上，它将溢出父容器。我什至试图将其放在div中并提供固定的宽度大小，但没有用。

我认为问题出在iPhone的野生动物园浏览器中，所以我在chrome浏览器（iPhone）中对其进行了测试，但是问题仍然存在。所以我认为这是iOS / iPhone问题。

我试图在Twitter社区开发人员中寻找答案，但发现一个线程（see here）提到了相同的问题，但未提供解决方案。

（请参阅下面的PC屏幕截图，该屏幕截图按预期效果很好）

（请参阅以下带问题的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），在此处显示浅绿色背景的文本。

Answer 1

我已经解决了这个问题，并设法达到了预期的性能。我正在回答，以便将来可以为社区提供帮助。

您必须使用twitter API提供的属性data-height和data-width。现在，因为我希望它具有响应性，所以我不想使用固定大小，因此我尝试将data-width的值设置为100%，希望它会自动调整父容器的宽度，但没有。

因此，我不得不操纵data-width属性以某种方式调整为父容器的大小。我通过获取与此Twitter元素对应的nativeElement并动态设置属性data-width属性来做到这一点，您可以使用相同的方法从容器的宽度中获取属性，但这一次是容器div的{{1} }。这是在Angular 6的typescript中完成的。请参见下面包含twitter标签的组件的type script：-

nativeElement

请参见下面的html代码，了解相应的组件：-

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'));
  }
}

Answer 2

尝试此CSS修复程序：

<div classname="row">
<div classname="elementone"></div>
<div classname="elementtwo"></div>
<div classname="slider"></div>
</div>

Answer 3

我们最近发现publish.twitter.com上Twitter的用于嵌入式个人资料时间轴的相当新的代码生成器仍然会造成时间轴溢出iOS设备的容器宽度的问题，尤其是宽度和高度设置（并且没有数据-推特限制设置）。

当前，我们正在通过添加CSS处理此问题（根据需要，选择器可能会附加您的特殊性）：

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

请注意，您还需要确保已设置视口，也许是这样（但要适合您的实现）：

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

旧的shrink-to-fit=no黑客在现代iOS中似乎不再起作用

iPhone上的浏览器中存在嵌入式Twitter时间轴溢出问题

3 个答案: