Facebook Как кнопка, вызывающая горизонтальную прокрутку на мобильном устройстве

Question

У меня есть функция Facebook, как кнопка, которая отлично отрисовывается во всех браузерах на рабочем столе и на мобильных устройствах. Но проблемы лежат на устройствах с низким разрешением с разрешением 240x320. Кнопка «Like» заставляет устройство увеличивать масштаб страницы, тем самым обеспечивая горизонтальную прокрутку.

Кнопки отлично отрисовки на устройствах с шириной> 320 пикселей, например, на iPhone и т. Д., Но более старые устройства Android с шириной меньше, чем с проблемами.

Способ, которым я его вижу. Страница загружается отлично, а затем вызывает вызов в Facebook, а затем возвращается с некоторым параметром, который разбивает все. Он генерирует . Я пытаюсь установить параметры width и overflow, но ни один из них не работает. Я инициализирую кнопку Like, подобную этому:

<div id="fb-root"> 
<!--Facebook begins-->  
     <div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div> 
     <!-- ends --> 
</div> 

<script> 
     window.fbAsyncInit = function() { 
      FB.init({ appId: '328982000461228', status: true, cookie: true, 
       xfbml: true 
      }); 
      FB.Event.subscribe('edge.create', function (response) { 
       ntptEventTag('ev=Social&Action=Method Shared'); 
      }); 
     }; 
     </script> 
    <script type="text/javascript"> 

Answer 1

Ни один из приведенных выше решений не помогло. Наконец получил ответ.Хотя это не лучшее решение, но оно выполняет свою работу.

Я применил это к родительскому контейнеру фб кнопки как:

.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; } 

Answer 2

Facebook Like Button автоматически генерирует iframe на вашей странице. Попробуйте установить ширину, если iframe с css или динамически с javascript. В iframe есть класс = "fb_ltr".

Answer 3

Поместите свою кнопку в div и примените скрытый стиль переполнения на этом div.
UDATE: Попробуйте установить переполнение, скрытое в теге html и теге (имеет большое значение на вкладках страницы fb).

фрагмент кода вы также можете найти полезным это:

<meta name="viewport" content="width=320,user-scalable=false" /> 
<style type="text/css"> 
    body { 
     -webkit-touch-callout: none; 
     -webkit-user-select: none; 
     -webkit-user-modify: none; 
     -webkit-highlight: none; 
     -webkit-user-select: none; 
    } 
</style> 

Answer 4

Я думаю, что единственный способ решить это с помощью пользовательского CSS для кнопки fblike

проверки этой ссылки:

Custom skin for facebook like button http://forum.developers.facebook.net/viewtopic.php?pid=236534

Answer 5

Были ли проверены другие обычные сайты в одном браузере с низким разрешением? проверьте twitter.com, если полоса прокрутки все еще появляется в браузере (я столкнулся с чем-то подобным), определение полноэкранного браузера всегда больше, чем доступная ширина, мне в конечном итоге пришлось определить «div» внутри тело с определенной шириной (320 пикселей) и сбрасывать содержимое внутри него, в дополнение к переполнению тела: скрыто

Answer 6

Обнаружение устройства с низким разрешением и использование другого, как макет кнопки, который подходит ему лучше.

Это одно:

data-layout="box_count" , 

это займет немного больше вертикального пространства, хотя, и это хорошо.

• button_count

• box_count

Answer 7

Это была самая легкая вещь для меня, работает на IOS Safari, если вы используете как:

html, body {overflow-x: hidden;}