Twitter/Facebook 嵌入式帖子不适合移动设备答案

【问题标题】：Twitter/Facebook embedded posts not mobile friendlyTwitter/Facebook 嵌入式帖子不适合移动设备
【发布时间】：2016-06-12 23:04:03
【问题描述】：

我正在开发一个基于卡片布局的应用。在一些卡片中，我使用 Facebook 的 Javascript SDK 和 Twitter 的 widgets.js 嵌入了 facebook/twitter 帖子。在桌面上，卡片看起来不错，正如我所期望的（见第一个屏幕截图）。

当我使用 Chrome 设备模拟器模拟移动设备（例如 iPhone 5/6、Nexus 6 等）时，嵌入的帖子太小以至于无法辨认，即使在重新加载页面后也是如此（参见第二个屏幕截图）。

这是我的一张卡片的 HTML，其中包含嵌入式帖子：

<div class="card result-link content result center-card no-hover" ng-class="{'mobile': $parent.isMobile}" ng-show="post.show">
    <div class="card-title">
        <i class="fa fa-signal"></i>
        <div class="title-txt">
            Amplify <i class="fa" ng-class="invite.date_submitted ? 'fa-circle-o' : 'fa-circle'"></i>
        </div>
        <div class="timestamp">
            {{post.requested_timestamp}}
        </div>
    </div>

    <div ng-if="post.provider === 'twitter'" id="{{'post_' + post.id}}"></div>

    <div id="fb_embed" ng-if="post.provider === 'facebook'">
        <div class="fb-post" data-href="{{post.facebook_link}}"></div>
    </div>
</div>

上面的卡片是一个指令。这是指令代码：

app.directive('amplifyRequest', ['$http', '$timeout', function($http, $timeout) {
    return {
        replace: true,
        templateUrl: '/assets/amplify_request.html',
        transclude: false,
        scope: {
            post: '='
        },
        controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {    
            if($scope.post.provider === 'twitter') {
                $timeout(function() {
                    twttr.widgets.createTweet($scope.post.twitter_id, document.getElementById('post_' + $scope.post.id));
                },100)
            };
        }]
    };
}]);

这是 Twitter 嵌入在桌面上的样子：

这是模拟 iPhone 6 上的同一推文：

我想知道我在这里做错了什么。根据我在文档中阅读并在其他网站上看到的内容，推文/帖子应自动检测设备是否为移动设备并进行调整。不过这里似乎没有发生这种情况。

【问题讨论】：

标签： html facebook mobile twitter facebook-javascript-sdk

【解决方案1】：

希望这对将来的某人有所帮助。当我意识到我缺少移动设备的关键元标记时，我再次查看了 Bootstrap 文档，试图弄清楚我缺少什么。值得一提的是，我已经使用 Bootstrap 一年多了，但还没有用它做太多的移动工作。

我将此行添加到页面的<head> 标记中，现在一切正常。

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

【讨论】：