2011-12-16 9 views
8

मेरे पास एक फेसबुक की तरह बटन कार्यान्वयन है जो सभी ब्राउज़रों डेस्कटॉप और मोबाइल में ठीक प्रस्तुति दे रहा है। लेकिन मुद्दे 240x320 के संकल्प के साथ कम-रेज उपकरणों पर निहित हैं। लाइक बटन डिवाइस को ज़ूम करने के कारण डिवाइस को क्षैतिज स्क्रॉलिंग प्रदान कर रहा है।मोबाइल डिवाइस पर क्षैतिज स्क्रॉलिंग के कारण फेसबुक की तरह फेसबुक

बटन चौड़ाई वाले => 320 पीएक्स जैसे आईफोन इत्यादि के साथ डिवाइस पर जुर्माना लगा रहे हैं, लेकिन पुराने एंड्रॉइड डिवाइसों की तुलना में कम चौड़ाई वाले मुद्दों को सामना करना पड़ रहा है।

जिस तरह से मैं इसे देखता हूं। पृष्ठ ठीक लोड करता है, फिर फेसबुक पर सर्वर कॉल करता है और फिर कुछ पैरामीटर के साथ लौटाता है जो इसे सब कुछ तोड़ देता है। यह उत्पन्न कर रहा है। मैं width और overflow सीएसएस पैरामीटर डालने की कोशिश कर रहा हूं लेकिन कोई भी काम नहीं कर रहा है। मैं इस तरह की तरह बटन आरंभ कर रहा हूँ:

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

उत्तर

4

कोई भी मदद की। अंत में जवाब मिला।हालांकि यह सबसे अच्छा समाधान नहीं है, लेकिन यह काम पूरा हो जाता है।

मैं बटन की तरह अमेरिकन प्लान की पैरेंट कंटेनर को यह लागू:

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

फेसबुक की तरह बटन स्वचालित रूप से अपने पेज के एक iframe उत्पन्न करता है। सीएसएस के साथ iframe या जावास्क्रिप्ट के साथ गतिशील रूप से चौड़ाई निर्धारित करने का प्रयास करें। Iframe वर्ग = "fb_ltr" है।

+0

नहीं किया जा सकता । मैं इसे जावास्क्रिप्ट के माध्यम से करने की कोशिश करता हूं। लेकिन जैसे बटन फेसबुक पर सर्वर कॉल करता है। जिसके बाद यह सब एक ही कहानी है। – amit

4

अपने जैसे बटन को div में रखें और उस div पर ओवरफ़्लो छिपी शैली को लागू करें।
UDATE: एचटीएमएल और बॉडी टैग पर छिपी हुई ओवरफ्लो सेट करने का प्रयास करें (एफबी पेज टैब पर एक बड़ा अंतर बनाता है)।

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

यदि व्यूपोर्ट 320px पर सेट है, तो कम रेज डिवाइस के लिए समस्या उत्पन्न होगी। सिफारिश नहीं की गई। और अतिप्रवाह: छिपा हुआ मैं पहले ही लागू कर चुका हूं। काम नहीं कर रहा। – amit

+0

मेरा उत्तर अपडेट किया गया:] – borisdiakur

+0

यहां भी देखें: http://stackoverflow.com/a/4827449/601466 – borisdiakur

2

मुझे लगता है कि इस को हल करने के लिए एक ही रास्ता अपने fblike बटन

जाँच इस लिंक के लिए एक कस्टम सीएसएस उपयोग कर रहा है:

एक कोड स्निपेट आप भी उपयोगी लग सकते है

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

2

क्या आपने उसी कम-से-कम ब्राउज़र पर अन्य नियमित साइटों की जांच की? twitter.com की जांच करें, अगर स्क्रॉलबार अभी भी ब्राउज़र में एक समस्या दिखाई देता है (मैं उस तरह कुछ चला गया), ब्राउजर पूर्ण स्क्रीन की परिभाषा हमेशा उपलब्ध चौड़ाई से बड़ी है, मुझे अंततः एक "div" को परिभाषित करना पड़ा बॉडी ओवरफ्लो बनाने के अलावा, एक विशिष्ट चौड़ाई (320 पीएक्स) वाला शरीर और इसके अंदर की सामग्री को डंप करें: छुपा

3

कम रिज़ॉल्यूशन डिवाइस का पता लगाएं, और बटन लेआउट जैसे अन्य का उपयोग करें जो इसे बेहतर बनाता है।

एक है यही कारण है कि:

data-layout="box_count" , 

यह थोड़ा और अधिक ऊर्ध्वाधर अंतरिक्ष हालांकि, जो ठीक है ले जाएगा।

  • button_count

enter image description here

  • box_count ऊपर दिए गए समाधानों

enter image description here

-2

यह मेरे लिए सबसे आसान काम था, आईओएस सफारी पर काम करता है, तो आप का उपयोग दोनों:

html, body {overflow-x: hidden;} 
संबंधित मुद्दे