Một số kích thước phông chữ được hiển thị lớn hơn trên Safari (iPhone)

Question

Có CSS ​​hay các lý do khác khiến Safari/iPhone bỏ qua một số cài đặt kích thước phông chữ không? Trên trang web cụ thể của tôi, Safari trên iPhone hiển thị một số kích thước phông chữ: văn bản 13px lớn hơn kích thước phông chữ: văn bản 15px. Liệu nó có thể không hỗ trợ kích thước phông chữ trên một số yếu tố?

Answer 1

Phản hồi của Joe có một số phương pháp hay nhất trong đó, nhưng tôi nghĩ vấn đề bạn mô tả tập trung vào thực tế là Mobile Safari tự động chia tỷ lệ văn bản nếu nó cho rằng văn bản sẽ quá nhỏ. Bạn có thể thực hiện việc này với thuộc tính CSS -webkit-text-size-adjust. Dưới đây là một ví dụ làm thế nào để áp dụng điều này để cơ thể của bạn, chỉ cần cho iPhone:

@media screen and (max-device-width: 480px){ 
    body{ 
    -webkit-text-size-adjust: none; 
    } 
} 

Answer 2

Tôi không sử dụng định nghĩa pixel nữa vì chúng thực sự gây nhầm lẫn và không giống hệt nhau trên các dịch vụ trực quan.

Gặp gỡ các đơn vị

1. “Ems” (em): Các “em” là một đơn vị mở rộng được sử dụng trong môi trường tài liệu web. Một em bằng kích thước phông chữ hiện tại, ví dụ, nếu kích thước phông chữ của tài liệu là 12pt, 1em bằng 12pt. Ems có thể mở rộng trong tự nhiên, vì vậy 2em sẽ bằng 24pt, .5em sẽ bằng 6pt, vv Ems đang trở nên ngày càng phổ biến trong các tài liệu web do khả năng mở rộng và tính chất thân thiện với thiết bị di động của họ.
2. Pixel (px): Pixel là đơn vị kích thước cố định được sử dụng trong phương tiện màn hình (tức là được đọc trên màn hình máy tính). Một pixel bằng một chấm trên màn hình máy tính (phân chia nhỏ nhất độ phân giải màn hình của bạn). Nhiều nhà thiết kế web sử dụng các đơn vị pixel trong tài liệu web để tạo ra một đại diện pixel hoàn hảo cho trang web của họ khi nó được hiển thị trong trình duyệt. Một vấn đề với đơn vị pixel là nó không mở rộng cho người đọc khiếm thị hoặc xuống để phù hợp với thiết bị di động.
3. Điểm (pt): Các điểm được sử dụng theo truyền thống trong phương tiện in (mọi thứ được in trên giấy, v.v.). Một điểm bằng 1/72 inch. Các điểm giống như pixel, ở chỗ chúng là các đơn vị có kích thước cố định và không thể chia tỷ lệ.
4. Phần trăm (%): Đơn vị phần trăm giống như đơn vị "em", tiết kiệm cho một số khác biệt cơ bản. Đầu tiên và quan trọng nhất, kích thước phông chữ hiện tại bằng 100% (tức là 12pt = 100%). Trong khi sử dụng đơn vị phần trăm, văn bản của bạn vẫn hoàn toàn có thể mở rộng cho các thiết bị di động và khả năng truy cập.

Answer 3

tôi đã cùng một vấn đề, hóa ra trong CSS ban đầu là có dòng này:

-webkit-giáo khoa điều chỉnh kích thước: 120%;

Tôi phải thay đổi thành 100% và mọi thứ đều trơn tru. Không cần thay đổi tất cả px thành em hoặc %%.

Answer 4

Ngoài ra, hãy chắc chắn rằng bạn đang thiết lập các thiết lập zoom ban đầu đến 1 trong khung nhìn của bạn thẻ meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" /> 

Answer 5

Use 100% instead of None.

normalize.css bao gồm này