Tại sao kích thước phông chữ (và các yếu tố khác) xuất hiện quá nhỏ trên thiết bị di động

Question

Tôi đang cố gắng tạo một bảng định kiểu đặc biệt cho thiết bị di động (ví dụ - iphone).

tôi có trong style sheet chính một quy tắc như thế này:

body 
{ 
    font-family: arial,georgia,"times new roman",times,serif; 
    font-size: 12px; 
    line-height: 18px; 
} 

và cho một tiêu đề nhất định: (tất cả các phông chữ kích thước của tôi là ở em trừ cho cơ thể trong đó xác định tất cả)

#header #PageTitle h1{ 
    font-size: 4.5em; 
} 

Khi tôi nhìn thấy tiêu đề lớn trên iphone của tôi có vẻ nhỏ yên tĩnh - tôi nên làm gì để thấy nó ở kích thước lớn hơn? Làm thế nào tôi có thể áp dụng cho tất cả các yếu tố một quy tắc để "chỉ là hai lần như lớn hơn" (Tôi đã cố gắng thay đổi kích thước kích thước phông chữ của cơ thể nhưng điều đó không làm việc).

Tôi đang làm gì sai và cách thực hiện chính xác?

Answer 1

-webkit-text-size-adjust: none | auto | <percentage>;

Vì vậy, lớn gấp đôi sẽ là: -webkit-text-size-adjust: 200%;

Answer 2

Tôi sẽ đặt body đặt thành 1em và sau đó là tiêu đề, v.v., được đặt tương ứng.

Answer 3

tôi thấy đoạn mã này mà vô hiệu hóa rộng trong iphone:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Tôi không chắc chắn nếu điều này là giải pháp chính xác (và nó làm mọi thứ trông quá lớn) - nhưng đây là một nửa ...