Facebook Podobnie jak przycisk powodujący poziome przewijanie na urządzeniu mobilnym

Question

Mam przycisk podobny do Facebooka, który działa poprawnie, we wszystkich przeglądarkach na komputery stacjonarne i komórkowe. Ale problemy dotyczą urządzeń o niskiej rozdzielczości i rozdzielczości 240x320. przycisk "Lubię to" powoduje, że urządzenie przybliża stronę, co powoduje przewijanie w poziomie.

Przyciski są renderowane poprawnie na urządzeniach o szerokości> = 320px takich jak iPhone itp., Ale starsze urządzenia z systemem Android o szerokości mniejszej niż to są problemy.

Sposób, w jaki to widzę. Strona ładuje się dobrze, a następnie wywołuje serwer na Facebooku, a następnie wraca z pewnym parametrem, który wszystko to zepsuje. Generuje on . Próbuję ustawić parametry CSS width i overflow, ale nic nie działa. Inicjuję przycisk Lubię to tak:

<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

Żadne z powyższych rozwiązań nie poradzić. Nareszcie dostałem odpowiedź.Chociaż nie jest to najlepsze rozwiązanie, ale wykonuje swoją pracę.

Zgłosiłem to do nadrzędnego kontenera na fb jak przycisk:

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

Answer 2

Facebook Like Button automatycznie generuje element iframe na Twojej stronie. Spróbuj ustawić szerokość iframe z css lub dynamicznie z javascript. Element iframe ma klasę = "fb_ltr".

Answer 3

Umieść swój przycisk podobny w dziale div i zastosuj ukryty styl ukryty w tym elemencie div.
UDATE: Spróbuj również ustawić przepełnienie ukryte na znaczniku HTML i body (robi dużą różnicę w zakładkach stron fb).

Kod snippet też może się przydać to:

<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

Myślę, że jedynym sposobem na rozwiązanie tego używa niestandardowych css dla przycisku fblike

sprawdzić ten zapewnia:

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

Answer 5

Sprawdziłeś inne zwykłe witryny w tej samej przeglądarce o niskiej rozdzielczości? sprawdź na twitter.com, czy pasek przewijania nadal jest problemem w przeglądarce (wpadłem na coś takiego), definicja pełnego ekranu przeglądarki jest zawsze większa niż dostępna szerokość, i ostatecznie musiałem zdefiniować "div" wewnątrz ciało o określonej szerokości (320 pikseli) i zrzuć zawartośd w nim, a także przepełnienie ciała: ukryte:

Answer 6

Wykryj urządzenie o niskiej rozdzielczości i użyj innego, podobnego do niego układu przycisków, który lepiej do niego pasuje.

Że jeden jest:

data-layout="box_count" , 

zajęłoby nieco więcej miejsca w pionie choć, co jest w porządku.

• button_count

• box_count

Answer 7

To było najłatwiejsze dla mnie, działa na iOS Safari jeśli używasz zarówno:

html, body {overflow-x: hidden;}