Nút Thích trên Facebook gây ra di chuyển ngang trên thiết bị di động

Question

Tôi có nút triển khai nút Thích trên Facebook hiển thị tốt trong tất cả các trình duyệt trên máy tính để bàn và thiết bị di động. Nhưng vấn đề nằm ở các thiết bị có độ phân giải thấp với độ phân giải 240x320. nút Thích làm cho thiết bị phóng to trang, do đó hiển thị cuộn ngang.

Các nút được hiển thị tốt trên các thiết bị có chiều rộng> = 320px giống như iPhone, nhưng các thiết bị Android cũ hơn có chiều rộng ít hơn so với các vấn đề đang gặp phải.

Cách tôi xem. Trang tải tốt, sau đó thực hiện một cuộc gọi đến máy chủ Facebook và sau đó trả về với một số tham số phá vỡ tất cả. Nó đang tạo ra một . Tôi đang cố gắng đặt các thông số width và overflow CSS nhưng dường như không có cách nào hoạt động. Tôi đang khởi tạo nút Thích như sau:

<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

Không ai trong số các giải pháp trên giúp. Cuối cùng cũng có câu trả lời.Mặc dù nó không phải là giải pháp tốt nhất, nhưng nó được hoàn thành công việc.

tôi áp dụng này để container mẹ của fb nút như:

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

Answer 2

Nút like Facebook tự động tạo iframe trên trang của bạn. Hãy thử đặt chiều rộng nếu iframe có css hoặc động với javascript. Khung nội tuyến có class = "fb_ltr".

Answer 3

Đặt nút tương tự của bạn vào div và áp dụng kiểu ẩn bị tràn trên div đó.
UDATE: Hãy thử cũng đặt ẩn bị tràn trên thẻ html và thẻ body (tạo sự khác biệt lớn trên tab trang fb).

Một đoạn mã bạn cũng có thể tìm thấy hữu ích là thế này:

<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

Tôi nghĩ rằng cách duy nhất để giải quyết việc này là sử dụng một css tùy chỉnh cho nút fblike bạn

kiểm tra các liên kết này:

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

Answer 5

Bạn có kiểm tra các trang web thông thường khác trên cùng một trình duyệt có độ phân giải thấp không? kiểm tra twitter.com, nếu thanh cuộn vẫn xuất hiện một vấn đề trong trình duyệt (tôi chạy vào một cái gì đó như thế), định nghĩa của trình duyệt toàn màn hình luôn luôn lớn hơn chiều rộng có sẵn, tôi cuối cùng đã phải xác định một "div" bên trong thân máy có chiều rộng cụ thể (320px) và đổ nội dung bên trong, ngoài việc làm cho phần tràn cơ thể: ẩn

Answer 6

Phát hiện thiết bị có độ phân giải thấp và sử dụng bố cục nút khác phù hợp hơn.

Đó là một là:

data-layout="box_count" , 

nó sẽ mất hơi nhiều không gian thẳng đứng, mặc dù đó là tốt.

• button_count

• box_count

Answer 7

Đây là điều dễ dàng nhất đối với tôi, hoạt động trên iOS Safari nếu bạn sử dụng cả hai:

html, body {overflow-x: hidden;}