Twitter Bootstrap phóng to văn bản khác nhau trên Webkit (Chrome, Safari)

Question

Tôi đang xem xét sử dụng Twitter Bootstrap (với một số tùy chỉnh) để xây dựng lại trang web.

Một vấn đề là thu phóng trang/văn bản trên các trình duyệt Webkit như Chrome và Safari. Chúng không viết lại văn bản vào màn hình khi phóng to. Thay vào đó, văn bản tiếp tục tắt trang yêu cầu cuộn ngang.

Ví dụ, so sánh phóng to văn bản trên trang chủ Bootstrap trên Chrome/Safari và Firefox - trên Firefox ngay cả thanh menu đáp ứng hoạt động đúng cách khi không có đủ chỗ cho văn bản menu do thu phóng.

Điều này có vẻ là một tính năng Webkit được biết đến với bố cục dựa trên pixel, có thể được giải quyết bằng cách sử dụng chiều rộng dựa trên em, trông không thực tế với Bootstrap chuẩn (cách quá nhiều để thay đổi và duy trì).

Vì vậy, có bất kỳ dẫn xuất Bootstrap nào sử dụng độ rộng dựa trên em hay có cách nào để thêm đoạn trích CSS ... để khắc phục sự cố không? Đó là điều duy nhất cho đến nay ngăn tôi sử dụng Bootstrap trong dự án này. Tôi muốn trang web có thể truy cập được đối với người dùng có thị lực kém hơn, những người thường xuyên thu phóng.

Sẽ rất tuyệt nếu Webkit sửa lỗi/tính năng hoạt động giống như các công cụ trình duyệt khác nhưng tôi không thấy điều đó xảy ra bất cứ lúc nào sớm.

[cập nhật] Chỉ cần rõ ràng, đó là hành động tương tự hoàn toàn đối với Firefox tôi sau: văn bản thu phóng vẫn bị giới hạn trong cột VÀ truy vấn phương tiện nhận ra không gian trên màn hình bị giới hạn khi văn bản được phóng to và điều chỉnh menu và số lượng cột phù hợp. Bố cục chất lỏng giúp hạn chế văn bản bài viết chính, nhưng các menu và thanh bên vẫn là một mớ hỗn độn trên Chrome/Safari khi phóng to.

Answer 1

Rob,

Bạn có thể thực hiện những gì bạn muốn bằng cách sử dụng một container chất lỏng trong bootstrap và sau đó thiết lập thuộc tính max-width của nó đến một chiều rộng tỉ lệ với một cái gì đó như:

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

html sẽ trông cái gì đó như:

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

đâu div nội dung lớp học không nằm trong các thùng chứa và có thể đóng vai trò là nền. Đây là cách tôi đã thiết lập trang web bootstrap của tôi và vừa thử trong safari và firefox với kết quả bạn đang tìm kiếm. Như bạn đã đề cập, việc dựng hình phải làm công cụ hiển thị của trình duyệt (gecko trong trường hợp của firefox và webkit trong trường hợp safari). Hy vọng điều này sẽ xóa mọi thứ cho bạn.

Answer 2

Bạn có thể đặt thanh trượt là trợ năng tùy chọn cho khách truy cập thị lực thấp hơn của trang web của bạn .. Chỉ cần sử dụng thay đổi kích thước văn bản bằng cách sử dụng jquery. Không cần phải phóng to trang. Xem ví dụ này:

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