Facebook Like按钮导致移动设备上的水平滚动

Question

我有一个Facebook Like按钮实现，可以在所有桌面和移动浏览器中呈现。但问题在于分辨率为240x320的低分辨率设备。 Like按钮使设备放大页面，从而呈现水平滚动。

按钮在宽度＆gt; = 320px的设备上呈现正常，如iPhone等，但宽度小于此的旧设备面临问题。

我看待它的方式。页面加载正常，然后对Facebook进行服务器调用，然后返回一些打破它的参数。它正在生成<iframe>。我试图放置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

将您的喜欢按钮放入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 2

上述解决方案都没有帮助。终于得到了答案。虽然它不是最好的解决方案，但它可以完成工作。

我将它应用于fb like按钮的父容器：

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

Answer 3

Facebook Like Button会自动在您的网页上生成iframe。如果iframe使用css或动态使用javascript，请尝试设置宽度。 iframe有class =“fb_ltr”。

Answer 4

检测低分辨率设备，并使用其他更适合的按钮布局。

那是：

data-layout="box_count" ,

虽然这需要更多的垂直空间，这很好。

• button_count

• box_count

Answer 5

我认为解决这个问题的唯一方法是为你的fblike按钮使用自定义css

检查此链接：

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

Answer 6

您是否在同一个低分辨率浏览器上查看其他常规网站？检查twitter.com，如果滚动条仍然在浏览器中出现问题（我遇到类似的问题），浏览器全屏的定义总是大于可用宽度，我最终不得不在内部定义一个“div”具有特定宽度（320px）的主体并将其内容转储到其中，此外还使身体溢出：隐藏

Answer 7

对我来说这是最简单的事情，如果您同时使用这两种方法，则适用于iOS Safari：

html, body {overflow-x: hidden;}