Twitter/Facebook嵌入式帖子不友好移動

我正在開發基於卡片佈局的應用程序。在某些卡片中，我使用Facebook的Javascript SDK和Twitter的widgets.js嵌入了facebook/twitter帖子。在桌面上，卡片看起來很好，就像我期望的那樣（請參閱第一張截圖）。使用Chrome設備模擬器模擬移動設備（例如iPhone 5/6，Nexus 6等）時，即使重新加載頁面後，嵌入的帖子太小以至於難以辨認（請參閱第二張屏幕截圖）。Twitter/Facebook嵌入式帖子不友好移動

下面是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相同的鳴叫：

我想知道的是我在這裏做錯了。從我在文檔中閱讀並在其他網站上看到的內容，推文/帖子應自動檢測設備是否爲移動設備並進行調整。雖然這似乎並沒有發生。

來源

2016-02-29 ACIDSTEALTH

希望這可以幫助未來的人。當我意識到我錯過了移動設備的關鍵元標記時，我正在重新查看Bootstrap文檔，試圖找出我錯過的內容。一年多來我一直在使用Bootstrap是值得的，但還沒有做過多的移動工作。

我彈出這一行到我的頁面的<head>標籤，現在一切看起來很正常。

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

來源

2016-02-29 19:40:57 ACIDSTEALTH

Twitter/Facebook嵌入式帖子不友好移動

回答

相關問題