Phông chữ Bootstrap mở rộng quá nhỏ trên thiết bị di động

Tôi đã dành rất nhiều thời gian làm việc với Foundation và ít thời gian hơn khi làm việc với Bootstrap. Tôi đang gặp vấn đề với khả năng phản hồi trong Bootstrap mà tôi không hiểu vì điều này dường như chỉ hoạt động trong Nền tảng. Vấn đề là, trong khi đáp ứng lưới hoạt động như mong đợi, phông chữ của tôi đang thu nhỏ lại đến nỗi nó gần như không đọc được trên thiết bị di động. Lưu ý trong ví dụ dưới đây của tôi rằng tôi đặt kích thước phông chữ là 14px, nhưng trên thiết bị di động, điều này đang trở nên rất nhỏ. Bạn có thể thấy điều này bằng cách nhấp vào nút di động trong các công cụ dành cho nhà phát triển Chrome.Phông chữ Bootstrap mở rộng quá nhỏ trên thiết bị di động

Các html để tái sản xuất này là rất đơn giản, đây là một jsbin: http://jsbin.com/lumepumufu/1/

Và đây là html:

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

Nguồn

2015-01-02 Jim Cooper

Bạn đang ở chế độ quirks . – thebjorn

+18

Bạn có thẻ meta chế độ xem trong thẻ đầu như ''? – ckuijjer

@thebjorn Tôi nhận được kết quả tương tự khi xem trang web trực tiếp trên điện thoại của tôi. –

Bạn nên luôn luôn bắt đầu từ một mẫu, ví dụ "Mẫu cơ bản" (http://getbootstrap.com/getting-started/#template). Điều này hoạt động như dự định:

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

Có vẻ như rất nhiều "tàu tuần dương", nhưng mọi thứ đều có lý do.

Nguồn

2015-01-02 19:38:24 thebjorn

+12

như @ziaprog cho biết, khóa là '' – jjmontes

Mọi thứ đều không có lý do. Đây là một vấn đề CSS và không cần phải bao gồm javascript jquery hoặc bootstrap cho mục đích duy nhất này. Như đã đề cập trong phần bình luận và câu trả lời dưới đây, '' là câu trả lời đúng. – kareblak

Trong ngữ cảnh của ai đó đang bắt đầu với Bootstrap, như trường hợp trong câu hỏi này, tôi vẫn cảm thấy rằng cách tiếp cận đúng là bắt đầu với các mẫu được cung cấp. Khi bạn hiểu rõ hơn về các hoạt động bên trong, bạn sẽ tự nhiên điều chỉnh giàn giáo theo nhu cầu cụ thể của dự án của bạn, nhưng đó sẽ là một cách rất bực bội để bắt đầu học Bootstrap. – thebjorn

Bootstrap là thiết bị di động trước tiên. Bạn có thể tìm thấy kiểu di động đầu tiên trong toàn bộ thư viện thay vì trong các tệp riêng biệt.

Để đảm bảo vẽ phù hợp và liên lạc zoom, thêm thẻ meta viewport để đầu

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

Nguồn

2015-05-26 13:19:07 ziaprog

Đây phải là câu trả lời được chấp nhận – Clint

Đây là câu trả lời cần được chấp nhận – Aaron

của bạn Nếu bạn đang chạy một ứng dụng đường ray, bạn có thể thử ngọc rails_layout

Nguồn

2017-03-31 12:03:47 Feuda

Phông chữ Bootstrap mở rộng quá nhỏ trên thiết bị di động

Trả lời

Các vấn đề liên quan