2016-02-29 1 views
1

Я работаю над приложением с карточным макетом. В некоторых карточках у меня есть встроенные сообщения facebook/twitter с использованием Javascript SDK от Google и виджетов. На рабочем столе карты выглядят отлично, как и следовало ожидать (см. Первый скриншот).Twitter/Facebook встроенные сообщения, не предназначенные для мобильных телефонов

Когда я эмулирую мобильное устройство (например, iPhone 5/6, Nexus 6 и т. Д.) С помощью эмулятора устройства Chrome, встроенные сообщения настолько малы, что они неразборчивы даже после перезагрузки страницы (см. Второй снимок экрана).

Вот 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 выглядит на рабочем столе:

enter image description here

Здесь же Твитнуть на моделируемой iPhone 6:

enter image description here

Что я хотел бы знать, это то, что я делаю неправильно здесь. Из того, что я читал в документах и ​​видел на других сайтах, твиты/сообщения должны автоматически определять, является ли устройство мобильным устройством и настраивается. Однако, похоже, это не происходит.

ответ

1

Надеюсь, это поможет кому-то в будущем. Я снова перебирал документы Bootstrap, пытаясь понять, чего мне не хватает, когда я понял, что мне не хватает критического метатега для мобильных устройств. Для того, что стоит, я использую Bootstrap уже более года, но не сделал с ним много мобильной работы.

Я вынул эту строку в тег моей страницы <head>, и теперь все выглядит нормально.

<meta name="viewport" content="width=device-width, initial-scale=1"> 
Смежные вопросы