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

【问题标题】：Facebook Like button causing horizontal scrolling on mobile deviceFacebook Like 按钮导致移动设备上的水平滚动
【发布时间】：2012-01-22 00:15:17
【问题描述】：

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

按钮在宽度 >= 320 像素（如 iPhone 等）的设备上呈现良好，但宽度小于该宽度的旧 android 设备面临问题。

我的看法。该页面加载正常，然后对 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">

【问题讨论】：

标签： javascript css facebook iframe facebook-like

【解决方案1】：

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

【讨论】：

无法完成。我尝试通过javascript来做到这一点。但是like按钮对facebook进行服务器调用。之后都是一样的故事。

【解决方案2】：

将点赞按钮放入一个 div 并在该 div 上应用溢出隐藏样式。
UDATE: 也尝试在 html 和 body 标签上设置溢出隐藏（在fb 页面标签）。

您可能会觉得有用的代码 sn-p 是这样的：

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

【讨论】：

视口如果设置为 320px，会对低分辨率设备造成问题。不建议。和溢出：隐藏我已经实现了。不工作。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

那个是：

data-layout="box_count" ,

不过，它会占用更多的垂直空间，这很好。

button_count

box_count

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

这对我来说是最简单的事情，如果你同时使用这两种方式，它可以在 iOS Safari 上运行：

html, body {overflow-x: hidden;}

【讨论】：

【解决方案7】：

在外部容器上这样做：

.fb-like-wrapper {
    width:300px!important;
    overflow-x:hidden!important;
    margin: 5px 0 5px 10px;
    display:block!important;
}

【讨论】：