बूटस्ट्रैप फ़ॉन्ट स्केलिंग मोबाइल पर बहुत छोटा

मैंने फाउंडेशन के साथ काम करने में बहुत समय बिताया है और बूटस्ट्रैप के साथ काम करने में कम समय बिताया है। मुझे बूटस्ट्रैप में प्रतिक्रिया के साथ कोई समस्या है जो मुझे समझ में नहीं आता क्योंकि यह सिर्फ फाउंडेशन में काम करता है। मुद्दा यह है कि, जबकि ग्रिड प्रतिक्रिया अपेक्षित के रूप में काम करती है, मेरे फ़ॉन्ट्स इतने छोटे पैमाने पर स्केल किए जा रहे हैं कि यह मोबाइल पर लगभग गैरकानूनी है। नीचे दिए गए मेरे उदाहरण में नोटिस कि मैंने फ़ॉन्ट आकार को 14px पर सेट किया है, लेकिन मोबाइल पर यह बहुत छोटा हो रहा है। आप क्रोम देव उपकरण में मोबाइल बटन पर क्लिक करके इसे देख सकते हैं। यहाँ http://jsbin.com/lumepumufu/1/बूटस्ट्रैप फ़ॉन्ट स्केलिंग मोबाइल पर बहुत छोटा

और HTML है::

एचटीएमएल पुन: पेश करने के लिए इस यहाँ बहुत सरल है, एक jsbin है

<html> 
    <head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body style="font-size:14px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     </div> 
    </div> 
    </body> 
</html>

स्रोत

2015-01-02 Jim Cooper

कोशिश कर सकते हैं आप quirks मोड में हैं । – thebjorn

+18

क्या आपके पास हेड टैग के अंदर एक व्यूपोर्ट मेटा टैग है जैसे '<मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1 ">'? – ckuijjer

@thebjorn मुझे साइट को सीधे मेरे फोन पर देखने का एक ही परिणाम मिलता है। –

तुम हमेशा एक टेम्पलेट है, उदा से शुरू कर देना चाहिए "मूल टेम्पलेट"()। यह इरादे के अनुसार काम करता है:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body style="font-size:14px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     </div> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </body> 
</html>

यह बहुत "क्रूर" जैसा प्रतीत हो सकता है, लेकिन सब कुछ एक कारण के लिए है।

स्रोत

2015-01-02 19:38:24 thebjorn

+12

के रूप में @ziaprog ने कहा, कुंजी 'मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1 ">' – jjmontes

सबकुछ किसी कारण से नहीं है। यह एक सीएसएस मुद्दा है और इस एकमात्र उद्देश्य के लिए jquery या बूटस्ट्रैप जावास्क्रिप्ट को शामिल करने की आवश्यकता नहीं है। जैसा कि टिप्पणियों और नीचे दिए गए उत्तर में बताया गया है, '<मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1"> 'सही उत्तर है। – kareblak

बूटस्ट्रैप से शुरू होने वाले किसी व्यक्ति के संदर्भ में, जैसा कि इस प्रश्न में मामला है, मुझे अभी भी लगता है कि प्रदान किए गए टेम्पलेट्स के साथ सही दृष्टिकोण शुरू करना है। जैसे ही आप आंतरिक कार्यकलापों की गहरी समझ प्राप्त करते हैं, आप स्वाभाविक रूप से अपने प्रोजेक्ट की विशिष्ट आवश्यकताओं के लिए मचान को अनुकूलित करेंगे, लेकिन यह बूटस्ट्रैप सीखना शुरू करने का एक बहुत ही निराशाजनक तरीका होगा। – thebjorn

बूटस्ट्रैप मोबाइल पहले है। मोबाइल पहली शैलियों को अलग-अलग फाइलों की बजाय पूरी लाइब्रेरी में पाया जा सकता है।

उचित प्रतिपादन और स्पर्श ज़ूमिंग सुनिश्चित करने के लिए अपने सिर

<meta name="viewport" content="width=device-width, initial-scale=1">

स्रोत

2015-05-26 13:19:07 ziaprog

यह स्वीकार्य उत्तर होना चाहिए – Clint

यह वह उत्तर है जिसे स्वीकार किया जाना चाहिए – Aaron

के लिए व्यूपोर्ट जोड़ने आप एक रेल एप्लिकेशन द्वारा चलाए जा रहे हैं, तो आप मणि rails_layout

स्रोत

2017-03-31 12:03:47 Feuda

बूटस्ट्रैप फ़ॉन्ट स्केलिंग मोबाइल पर बहुत छोटा

उत्तर

संबंधित मुद्दे