Question

我正在处理基于卡片布局的应用。在某些卡片中，我使用Facebook的Javascript SDK和Twitter的widgets.js嵌入了facebook / twitter帖子。在桌面上，卡片看起来很好，正如我所料（见第一张截图）。

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

以下是我的一张带有嵌入帖子的卡片的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上的相同推文：

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

Answer 1

希望这可以帮助将来的某个人。当我意识到我错过了移动设备的关键元标记时，我再次查看Bootstrap文档，试图弄清楚我错过了什么。对于我现在使用Bootstrap超过一年的价值，但是我们还没有做过多次移动工作。

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

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

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

1 个答案: