Facebook Like按鈕導致移動設備上的水平滾動

Question

我有一個Facebook Like按鈕的實現，它在所有瀏覽器桌面和移動設備上渲染都很好。但問題在於分辨率爲240x320的低分辨率設備。 Like按鈕導致設備放大頁面，從而呈現水平滾動。

按鈕在寬度> = 320像素的設備上像iPhone等一樣渲染效果很好，但寬度小於此值的較老的android設備正面臨問題。

我看到它的方式。頁面加載正常，然後對Facebook進行服務器調用，然後返回一些參數，將其全部分解。它正在生成。我試圖把width和overflow CSS參數，但似乎沒有工作。我正在初始化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

以上解決方案的幫助。終於得到了答案。雖然這不是最好的解決方案，但它可以完成工作。

我申請這個像按鈕FB的父容器：

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

Answer 2

Facebook Like Button自動在頁面上生成一個iframe。嘗試設置寬度if iframe與CSS或動態JavaScript。 iframe具有class =「fb_ltr」。

Answer 3

將你喜歡的按鈕放入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> 

Answer 4

我認爲解決這個問題的唯一方法是使用自定義的CSS爲您fblike按鈕

檢查此鏈接：

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

Answer 5

您是否在同一個低分辨率瀏覽器上檢查了其他常規網站？檢查twitter.com，如果滾動條在瀏覽器中仍然出現問題（我遇到類似的情況），瀏覽器全屏的定義總是大於可用寬度，我最終不得不在內定義一個「div」特定寬度（320px）的身體並將其中的內容轉儲除了使身體溢出：隱藏

Answer 6

檢測低分辨率設備，並使用其他類似按鈕佈局更適合它。

那一個是：

data-layout="box_count" , 

，將採取雖然稍更多的垂直空間，這是罰款。

• button_count

• box_count

Answer 7

這是最簡單的事情對我來說，適用於iOS Safari瀏覽器，如果你同時使用：

html, body {overflow-x: hidden;}