Nhận kích thước phông chữ iPhone giống với các trình duyệt khác

Question

Một thời gian dài trở lại, tôi đọc a great article mô tả cách thức thân thiện với trình duyệt chéo với kích thước văn bản bằng cách sử dụng CSS. Chiến lược được mô tả là như vậy:

body { 
    font-size:100%; 
    line-height:1.125em; /* 16×1.125=18 */ 
} 
.bodytext p { 
    font-size:0.875em; /* 16x.875=14 */ 
} 
.sidenote { 
    font-size:0.75em; /* 16x0.75=12 */ 
} 

Chiến lược này hoạt động tốt trên mọi trình duyệt trừ Safari trên iPhone, mà luôn luôn có vẻ để phóng to bit nhất định của văn bản. Có chiến lược nào để ngăn chặn điều này xảy ra không?

Thông thường giải pháp của tôi là thêm -webkit-text-size-adjust: none; để ngăn iPhone mở rộng kích thước văn bản, nhưng gần đây tôi đã truy cập this article, mô tả rằng nó không cho phép người dùng phóng to văn bản trên BẤT K Safari trình duyệt Safari - rõ ràng là một vấn đề. Tôi biết rằng có một giải pháp CSS chỉ có ở đó, nhưng tôi không thể tìm thấy nó. Tôi chỉ muốn biết làm thế nào tôi nên đi về thiết lập kích thước phông chữ để họ hiển thị như nhau trên tất cả các trình duyệt, bao gồm cả iPhone.

Cập nhật: Để hiển thị ví dụ, nếu bạn xem this trên iPhone, bạn sẽ nhận thấy rằng văn bản trong đoạn lớn hơn đáng kể so với phần còn lại của văn bản xung quanh trang web. Tại sao văn bản này được tách ra, và có cách nào mà tôi có thể nói chỉ bằng cách nhìn vào mã mà điều đó sẽ xảy ra?

Answer 1

Bạn có một kỹ thuật bạn hài lòng với, nhưng với một nhược điểm:

Chiến lược này hoạt động tốt trên tất cả các trình duyệt trừ Safari trên iPhone, mà luôn luôn có vẻ để phóng to một số bit của văn bản . Có bất kỳ chiến lược nào để ngăn điều này xảy ra không?

..

Thông thường giải pháp của tôi sẽ có thêm -webkit-text-size-điều chỉnh: none; để ngăn chặn iPhone từ mở rộng kích thước của văn bản, nhưng gần đây tôi đi qua this article, trong đó mô tả rằng nó không cho phép người dùng phóng to vào văn bản trên bất kỳ trình duyệt Safari - rõ một vấn đề. Tôi biết rằng có là giải pháp chỉ hỗ trợ CSS, nhưng Tôi không thể tìm thấy giải pháp đó.

Nhìn vào style.css từ http://html5boilerplate.com/mobile/

/* Prevent mobile zooming while remain desktop zooming. 
    github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 
*/ 
body { 
    -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: none; 
} 

Có vẻ như chính xác những gì bạn đang sau, đặc biệt là khi bạn đọc the comment in the link:

Chỉ cần một gợi ý, nó có vẻ như một tốt ý tưởng để đặt -webkit-text-size-adjust thành 100% thay vì none. Đặt nó thành none ngăn việc phóng to phông chữ trên màn hình nền Trình duyệt WebKit, có vẻ như vấn đề về khả năng truy cập . giá trị mặc định Mobile Safari là trên 100%, đó là lý do tại sao văn bản lớn - vì vậy nếu bạn đặt nó để 100% thay vì none, phông chữ ở kích thước chính xác trên điện thoại di động nhưng có thể vẫn được thu nhỏ trên máy tính để bàn.

Answer 2

Từ kinh nghiệm của tôi, pixel sử dụng và không điểm, điểm máy Mac và PC màn hình khác nhau, trong khi pixel là nhiều hay ít cùng (phải trung thực luôn luôn có một sự khác biệt, nhưng với pixel đó là ít chú ý) .

Ngoài ra, line-height, không may luôn luôn có một sự khác biệt, (thậm chí giữa Safari và Firefox trên mac), nhưng bạn luôn có thể sử dụng phong cách có điều kiện cho Internet Explorer, và nếu cần thiết, sử dụng javascript giải pháp cho Firefox line-height.

Cuối cùng, một số phông chữ có thể hiển thị trình duyệt chéo khác nhau, đó là vấn đề thử nghiệm.