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

Có CSS ​​hoặc lý do nào 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ố văn bản font-size: 13px lớn hơn font-size: 15px. Nó có thể không hỗ trợ kích thước phông chữ trên một số phần tử?

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 đang mô tả xoay quanh việc Mobile Safari tự động điều chỉnh tỷ lệ văn bản nếu nó cho rằng văn bản sẽ hiển thị quá nhỏ. Bạn có thể giải quyết vấn đề này với thuộc tính CSS -webkit-text-size-adjust. Đây là một ví dụ về cách áp dụng điều này cho cơ thể của bạn, chỉ dành cho iPhone:

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

Sử dụng 100% thay vì Không có.

normalize.css bao gồm cái này

Ngoài ra, hãy đảm bảo rằng bạn đang đặt cài đặt thu phóng ban đầu thành 1 trong thẻ meta cửa sổ xem của mình:

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

Tôi không sử dụng các định nghĩa pixel nữa vì chúng thực sự khó hiểu và không hoàn toàn giống nhau trên các dịch vụ trực quan.

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

1. “Ems” (em): “Em” là một đơn vị có thể mở rộng được sử dụng trong phương tiện tài liệu web. Ví dụ: một em bằng với kích thước phông chữ hiện tại, nếu kích thước phông chữ của tài liệu là 12pt, thì 1em bằng 12pt. Ems có khả năng mở rộng về bản chất, vì vậy 2em sẽ bằng 24pt, .5em sẽ bằng 6pt, v.v. Ems ngày càng trở nên 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 chúng.
2. Điểm ảnh (px): Điểm ảnh là các đơn vị có kích thước cố định được sử dụng trong phương tiện màn hình (tức là có thể đọ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 giải nhỏ nhất của độ 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 bản trình bày 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 tăng tỷ lệ lên đối với người đọc khiếm thị hoặc hướng xuống để vừa với thiết bị di động.
3. Điểm (pt): Điểm thường được sử dụng trong phương tiện in ấn (bất cứ thứ gì được in trên giấy, v.v.). Một điểm bằng 1/72 inch. Đ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ệ kích thước.
4. Phần trăm (%): Đơn vị phần trăm giống như đơn vị “em”, hãy tiết kiệm cho một vài 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 có thể mở rộng hoàn toàn cho các thiết bị di động và cho khả năng truy cập.

Tôi gặp vấn đề tương tự, hóa ra trong CSS gốc có dòng này:

-webkit-text-size-Adjust: 120%;

Tôi đã phải thay đổi nó thành 100%, và mọi thứ đều suôn sẻ. Không cần thay đổi tất cả px thành em hoặc %%.

Ngoài ra, hãy kiểm tra xem bạn có đặt "chiều rộng / chiều cao" cho các phần tử mà bạn đang thao tác hay không, Safari ưu tiên kích thước hơn kích thước phông chữ trong svg's, Chrome và FF thì ít nhất hiện nay.