iPhone 浏览器中嵌入的 twitter 时间线溢出问题

Posted 2023-03-28

【中文标题】iPhone 浏览器中嵌入的 twitter 时间线溢出问题

【英文标题】：Embedded twitter timeline overflow issue in browser on iPhone

【发布时间】：2019-04-01 16:09:17

【问题描述】：

我正在开发我的个人网站，并希望使用 twitter 提供的嵌入式代码从我的 twitter 个人资料中显示我的推文集合。嵌入式代码在 pc 上工作得很好（见第二个屏幕截图），但在 iPhone 上它会溢出父容器。我什至试图把它放在一个 div 中并给出一个固定的宽度大小，但它没有用。

我认为问题出在 iPhone 的 safari 浏览器中，所以我在 chrome 浏览器（在 iPhone 中）上对其进行了测试，但问题仍然存在。所以我认为这是一个 ios/iPhone 问题。

我试图在 twitter 社区开发人员中寻找答案，我发现一个线程 (see here) 提到了同样的问题，但没有提供解决方案。

（请参见下面的电脑屏幕截图，它可以正常工作）

（请参阅下面的 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> 是组件选择器（Angular 6），它在此处显示带有浅绿色背景的文本。

【参考方案1】：

我们最近发现 Twitter 的 publish.twitter.com 用于嵌入式配置文件时间线的相当新的代码生成器仍然会导致时间线溢出 iOS 设备的容器宽度的问题，特别是在宽度和高度设置时（并且没有数据推文-限制设置）。

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

.twitter-timeline width: 100vw !important;

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

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

旧的shrink-to-fit=no hack 似乎不再对现代 iOS 产生任何影响

【参考方案2】：

我已经解决了这个问题并设法获得了所需的行为。我正在回答，以便将来可以帮助社区。​​p>

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

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

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-  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>

【参考方案3】：

试试这个 CSS 修复：

-webkit-overflow-scrolling:touch
overflow: auto

【讨论】：

欢迎来到 ***。我们正在寻找提供一些解释和背景的高质量答案。不要只给出一条线的答案；解释为什么你的答案是正确的，最好是引用。不包含解释的答案可能会被删除。