Vấn đề về kích thước phông chữ với iPhone

Question

Hiện tại tôi đang làm việc trên một phiên bản di động của một trang web, mọi thứ đều tuyệt vời, hoạt động tốt trên iPhone, Blackberry và Android.

Tôi có một vấn đề nhỏ, không phải là một vấn đề lớn nhưng vẫn còn một chút khó chịu. Tôi có:

<h1> thẻ thiết lập để 18px và đậm
<h2> thẻ thiết lập để 12px và đậm
<p> thẻ thiết lập để 12px và bình thường

Bây giờ mọi thứ trông rất tuyệt trên iPhone khi xem trong bức chân dung, nhưng khi thiết bị xoay ngang các <h1> tiêu đề đi nhỏ hơn (khó nói nhưng có thể nhỏ hơn so với <h2> thẻ ?!

đây là css của tôi:

h1 { 
color:#FFFFFF; 
font-size:18px; 
line-height:22px; 
font-weight:bold; 
margin-top:0px; 
} 

h2 { 
font-size:12px; 
color:#333333; 
font-weight:bold; 
margin-bottom:-5px; 
} 

p { 
color:#333333; 
font-size:12px; 
line-height:18px; 
font-weight:normal; 
} 

Answer 1

Tôi tin rằng bạn đang tìm kiếm này trong CSS của bạn:

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
} 

Answer 2

Như đã nêu trong câu trả lời Neurofluxation của bạn có thể sử dụng quy tắc css -webkit-text-size-điều chỉnh nhưng hãy cẩn thận rằng điều này có thể ngăn chặn người dùng điều chỉnh kích thước phông chữ trên Webkit trên máy tính để bàn (xem this article để biết thêm chi tiết).

Trong điều kiện này, bạn có thể kiểm tra thông qua các truy vấn phương tiện CSS3 (hoặc tác nhân người dùng) để an toàn.

Ví dụ,

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

Answer 3

Một giải pháp tốt hơn có thể được sử dụng 100% thay vì không có, như đã nêu bởi user612626 trong một thread cũ: Font size rendering inconsistencies on an iPhone

body { 
    -webkit-text-size-adjust: 100%; 
} 

cách này trình duyệt webkit máy tính để bàn có thể điều chỉnh kích thước và thu phóng tương ứng. Tôi nghĩ đây là cách tiếp cận tốt hơn so với lọc theo kích thước màn hình.

Hy vọng điều đó sẽ hữu ích.