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;}