Kích thước phông chữ không nhất quán trên điện thoại thông minh

Question

Tôi đang tinh chỉnh trang web để trang có vẻ tốt trên điện thoại thông minh. Tôi đã khai báo phần @media trong tệp CSS để tôi có thể chỉ định kích thước phông chữ cho trang này. Đây là phần phương tiện truyền thông:

@media screen and (max-device-width: 640px) { 
    #TermsOfUse { 
     padding: 0 2em 0 2em; 
     margin-left: auto; 
     margin-right: auto; 
     color: #777; 
     font: small sans-serif; 
    } 

    #TermsOfUse p { 
     color: #777; 
     font-weight: bold; 
     font: small sans-serif; 
     padding-top: 1em; 
     padding-bottom: 1em; 
    } 

    #TermsOfUse #trademark_footer p { 
     font: xx-large sans-serif; 
    } 
} 

Tuy nhiên, kích thước phông chữ hiển thị không nhất quán. Tôi đã nói với nó để hiển thị các phông chữ "nhỏ", nhưng một phần tiếp tục hiển thị các phông chữ trong một kích thước nhỏ hơn nhiều (id = "trademark_footer" ở phía dưới). Sử dụng "xx-large" thậm chí không làm cho phông chữ to bằng phông chữ "nhỏ" trong phần còn lại của trang. Tôi đang xem trang trong Chrome trên Android.

Ngoài ra, khi tôi xem trang này trong trình mô phỏng sau, tất cả các phông chữ trên toàn bộ trang đều nhỏ - quá nhỏ để đọc.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

Thứ nhất, tại sao phông chữ trong các nhãn hiệu ở dưới cùng của trang hiển thị rất nhỏ hơn nhiều so với các phông chữ trên phần còn lại của trang (Chrome trên Android)?

Thứ hai, tại sao tất cả các phông chữ hiển thị quá nhỏ trong trình mô phỏng iPhone?

Tất cả những gì tôi đang cố gắng thực hiện là hiển thị tất cả các phông chữ ở kích thước dễ đọc trên tất cả các điện thoại thông minh.

UPDATE:

Khi tôi xác định cỡ chữ rõ ràng, tôi có cùng một vấn đề. Ví dụ: nếu tôi chỉ định 13px, đối với phông chữ chính, tôi phải chỉ định khoảng 30px trên nhãn hiệu để nó xuất hiện ở kích thước tương tự.

Điều tương tự nếu tôi sử dụng "em".

UPDATE:

tôi chỉ thử nghiệm nó trong mặc định (tôi nghĩ) trình duyệt trên Samsung Galaxy S2 của tôi và cho thấy các chữ nhỏ li ti, quá quá nhỏ đó là không đọc được. Nhân tiện, trong trình duyệt Adroid mặc định, tôi có thể nhấn đúp và mở rộng thành kích thước đẹp.

Cố gắng này và nó dường như không tạo sự khác biệt:

body { 
    -webkit-text-size-adjust: none; 
} 

Answer 1

Tôi đã có một cái nhìn tại các mã nguồn của trang đó và tôi không thể nhìn thấy

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

Khi tôi nhìn vào iphone của tôi, nó dường như không mở rộng quy mô trang, cho thấy thiết bị đang diễn giải kích thước của trang và do đó không có truy vấn phương tiện nào có hiệu lực.

Việc thêm thẻ meta chế độ xem sẽ kích hoạt truy vấn phương tiện và thay đổi phông chữ bạn đang tìm kiếm.

info on the viewport tag

Answer 2

Đây là một cảnh quay dài nhưng nó có thể giúp bạn một chút.

Tôi đã mở http://inrix.com/traffic/Privacy bằng iPhone4 (iOS 5.0.1) và thực sự phông chữ rất nhỏ.

Hãy xem 's @media s (Bạn cũng có thể xem HTML5 Boilerplate's template bạn cũng có thể tìm hiểu điều gì đó liên quan đến vấn đề của mình). Tôi không gặp phải vấn đề về kích thước phông chữ nào và tôi đã kiểm tra liên kết trước trên Chrome (Phiên bản 26.0.1410.64 m), iOS 5.0.1 (9A405) và Android 2.3.6 với cả hai hướng (trong điện thoại) . Có lẽ bạn có thể đào một cái gì đó lên từ những người @media s.

Tôi không thể đồng ý hơn với Vector's answerYou should specify sizes when you want consistency, bạn nên tránh các tên khi bạn muốn nhất quán.

Cuối cùng đây là một số liên kết để biết thêm:

• How we learned to leave default font-size alone and embrace the em.
• Responsive Design with CSS3 Media Queries.

Cuối cùng như một tùy chọn thay thế bạn có thể tải về và nhúng một font trong css của bạn:

@font-face { 
    font-family: 'LiberationMonoRegular'; 
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'), 
     url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; } 

Sau đó, trong resets của bạn chỉ cần sử dụng phông chữ của bạn:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; } 

Hy vọng nó sẽ giúp!

Answer 3

Điều gì về việc thiết lập chiều cao dòng?

Tôi đã gặp phải sự cố tương tự thông qua các trình duyệt web khác nhau trong đó phông chữ có các vị trí khác nhau. Tôi có thể giải quyết vấn đề này bằng cách đặt height và line-height.