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

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

8 голосов
/ 16 декабря 2011

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

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

То, как я это вижу. Страница загружается нормально, затем вызывает сервер на Facebook и затем возвращается с каким-то параметром, который разбивает все на части. Это генерирует <iframe>. Я пытаюсь выставить CSS-параметры width и overflow, но ни один из них не работает. Я инициализирую кнопку «Мне нравится» следующим образом: 

<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">

Ответы [ 7 ]

4 голосов
/ 21 декабря 2011

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

Я применил это к родительскому контейнеру кнопки fb like: 

.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }
4 голосов
/ 16 декабря 2011

Поместите кнопку «Нравится» в div и примените скрытый стиль переполнения к этому div.
UDATE: Попробуйте также установить переполнение, скрытое в тегах html и body (имеет большое значение на вкладках страницы 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>
3 голосов
/ 20 декабря 2011

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

Это один: 

data-layout="box_count" ,

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

  • button_count

enter image description here

  • box_count

enter image description here

3 голосов
/ 16 декабря 2011

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

2 голосов
/ 20 декабря 2011

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

2 голосов
/ 19 декабря 2011

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

проверить следующие ссылки:

Пользовательский скин для кнопки "Мне нравится в Facebook" http://forum.developers.facebook.net/viewtopic.php?pid=236534

0 голосов
/ 16 июня 2014

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

html, body {overflow-x: hidden;}
...