2015-01-02 28 views
25

Vaktiyle çalışmak ve Bootstrap ile çalışmak için daha az zaman harcadım. Bootstrap'te, anlamadığım bir sorun yaşıyorum çünkü bu sadece Vakıf'ta çalışıyor gibi görünüyor. Sorun şu ki, şebeke yanıtı beklendiği gibi çalışıyorken, yazı tiplerim çok küçültülüyor. Aşağıdaki örnekte, yazı tipi boyutunu 14px olarak ayarladığımı fark ettim, ancak mobilde bu çok küçük oluyor. Bunu Chrome dev araçlarındaki mobil düğmesini tıklayarak görebilirsiniz.Bootstrap yazı tipi mobil cihazda çok küçük ölçekleme

bu burada, çok basit çoğaltmak html bir jsbin geçerli: http://jsbin.com/lumepumufu/1/

Ve burada html var:

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

deneyebilirsiniz . – thebjorn

+18

Head etiketinin içinde '? Gibi bir viewport meta etiketiniz var mı? – ckuijjer

+0

@thebjorn Aynı sonuçları sitemde doğrudan görüntüliyorum. –

cevap

55

Hep bir şablon, mesela başlamalıdır "Temel şablon" (http://getbootstrap.com/getting-started/#template).

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

O "cruft" bir sürü gibi gözükebilir, ama her şeyin bir nedeni vardır: Bu istendiği gibi çalışır.

+12

olarak belirtti, anahtar '' – jjmontes

+0

Her şey bir sebepten dolayı yok. Bu bir CSS sorunudur ve bu amaç için jquery veya bootstrap javascript eklemenize gerek yoktur. Yorumlarda ve aşağıdaki cevaplarda da belirtildiği gibi, '' doğru cevaptır. – kareblak

+0

Bootstrap ile başlayan bir kişi bağlamında, bu soruda olduğu gibi, hala doğru yaklaşımın sağlanan şablonlarla başlamak olduğunu düşünüyorum. İç işleyişi daha derin bir şekilde kavradıkça, iskeleyi doğal olarak projenizin özel ihtiyaçlarına göre uyarlayacaksınız, fakat bu Bootstrap'i öğrenmeye başlamak için çok sinir bozucu bir yol olacaktır. – thebjorn

49

Bootstrap önce mobil. Mobil ilk stilleri, ayrı dosyalar yerine tüm kitaplık boyunca bulunabilir. Bir raylar app çalıştırıyorsanız

kafanın

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

Kabul edilen cevap – Clint

+0

olmalıdır. Bu kabul edilmesi gereken cevaptır. – Aaron

0

için görünüm meta etiketi eklemek, düzgün oluşturmayı ve dokunmatik yakınlaştırma sağlamak için, lütfen tuhaflıklar modundayken mücevher rails_layout

İlgili konular