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

Question

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

按钮在宽度 >= 320px 的设备(如 iPhone 等)上呈现良好，但宽度小于该宽度的旧 android 设备则面临问题。

我的看法。该页面加载正常，然后向 Facebook 发出服务器调用，然后返回一些参数将其全部分解。它正在生成 <iframe> .我想把 width和 overflow CSS 参数但似乎都不起作用。我正在像这样初始化“赞”按钮:

<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 上应用溢出 Conceal 样式。
UDATE:还尝试在 html 和 body 标签上设置 Conceal 溢出(在 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>