ट्विटर बूटस्ट्रैप वेबकिट (क्रोम, सफारी)

Question

पर टेक्स्ट को अलग-अलग ज़ूम करता है। मैं साइट पुनर्निर्माण के लिए ट्विटर बूटस्ट्रैप (कुछ अनुकूलन के साथ) का उपयोग कर रहा हूं।

एक समस्या क्रोम और सफारी जैसे वेबकिट ब्राउज़र पर पेज/टेक्स्ट ज़ूमिंग के साथ है। ज़ूमिंग करते समय ये टेक्स्ट को स्क्रीन पर रीव्रैप नहीं करते हैं। इसके बजाय पाठ पृष्ठ को जारी रखता है जिसमें क्षैतिज स्क्रॉलिंग की आवश्यकता होती है।

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

यह पिक्सेल-आधारित लेआउट के साथ एक ज्ञात वेबकिट "फीचर" प्रतीत होता है, जिसे एम-आधारित चौड़ाई का उपयोग करके हल किया जा सकता है, जो मानक बूटस्ट्रैप के साथ अव्यवहारिक दिखता है (बदलने और बनाए रखने के लिए बहुत अधिक तरीका)।

तो, क्या कोई बूटस्ट्रैप व्युत्पन्न है जिसके आसपास एम-आधारित चौड़ाई का उपयोग होता है, या समस्या के आसपास काम करने के लिए सीएसएस आदि का स्निपेट जोड़ने का कोई तरीका है? इस परियोजना पर बूटस्ट्रैप का उपयोग करने से मुझे अभी तक रोकना एकमात्र चीज है। मैं चाहता हूं कि साइट कम दृष्टि वाले उपयोगकर्ताओं के लिए पहुंच योग्य हो, जो अक्सर ज़ूम करते हैं।

अच्छा होगा अगर वेबकिट ने अन्य ब्राउज़र इंजनों की तरह व्यवहार करने के लिए बग/फीचर को ठीक किया लेकिन मुझे नहीं लगता कि दुर्भाग्य से जल्द ही ऐसा हो रहा है।

[अपडेट] बस स्पष्ट होने के लिए, यह फ़ायरफ़ॉक्स के लिए पूरी तरह से इसी तरह की कार्रवाई है जिसके बाद मैं हूं: टेक्स्ट ज़ूमिंग कॉलम के भीतर बाधित रहता है, और मीडिया प्रश्नों का एहसास है कि पाठ ज़ूम किया गया है और मेनू समायोजित करते समय स्क्रीन पर स्थान सीमित है और तदनुसार कॉलम की संख्या। द्रव लेआउट मुख्य आलेख पाठ को बाधित करने में सहायता करते हैं, लेकिन ज़ूमिंग करते समय मेनू और साइडबार अभी भी क्रोम/सफारी पर एक गड़बड़ हैं।

Answer 1

रोब,

आप पूरा कर सकते हैं बूटस्ट्रैप में एक द्रव कंटेनर का उपयोग कर और उसके बाद की तरह कुछ के साथ एक प्रतिशत चौड़ाई के लिए अपनी अधिकतम-चौड़ाई संपत्ति की स्थापना करके आप क्या चाहते हैं:

[class*="container-"] { 
margin: auto; 
padding: 0 20px; 
max-width: 90%; 
} 

एचटीएमएल लगेगा कुछ ऐसा:

<div class="content"> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       put your contents in here 
      </div> 
     </div> 
    </div> 
</div> 

जहां कक्षा सामग्री का div कंटेनर के भीतर नहीं है और पृष्ठभूमि के रूप में कार्य कर सकता है। इस प्रकार मेरी बूटस्ट्रैप साइट सेट अप है और आपने जो परिणाम खोज रहे हैं, उसके साथ सफारी और फ़ायरफ़ॉक्स में अभी कोशिश की है। जैसा कि आपने बताया है कि प्रतिपादन को ब्राउज़र के प्रतिपादन इंजन (फ़ायरफ़ॉक्स के मामले में भौगोलिक और सफारी के मामले में वेबकिट) करना है। उम्मीद है कि यह आपके लिए चीजों को साफ़ करता है।

Answer 2

आप अपनी साइट के निचले दृष्टि आगंतुकों के लिए विकल्प पहुँच के रूप में एक स्लाइडर सेट कर सकते हैं .. बस पाठ-आकार बदलने jQuery का उपयोग कर का उपयोग करें। पेज ज़ूम करने की कोई ज़रूरत नहीं है।/एक्स कम से कम

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a').click(function() { 
      var os = $('p').css('font-size'); 
      var num = parseFloat(os, 10); 
      var px = os.slice(-2); 

      $('p').css('font-size', num/1.4 + px); 
      if (this.id == 'larger') { 
       $('p').css('font-size', num * 1.4 + px); 
      } 
     }); 
    }); 
</script> 

<a href="#" id ="larger">Larger [+]</a> 
<br> 
<a href="#" id="smaller">Smaller [-]</a> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>