글꼴 크기는 iPhone에서 다르게 렌더링됩니다.

Question

이것은 내 머리를 망치고 있습니다. 다음 HTML/CSS는 모든 브라우저에서 멋지게 보이며 iPhone에서 읽을 때 기대됩니다. 태그 (SITE DESIGN SOME COMPANY)의 텍스트는 약 25 % 정도 눈에 띄게 작습니다. 나는 DOM을 살펴보고 다른 스타일이 내 데스크톱에서 컴퓨팅되고 있는지 확인했습니다.

<footer> 
COPYRIGHT 2012/<a href="http://somesite.com"> 
SITE DESIGN SOME COMPANY</a>/ALL RIGHTS RESERVED 
</footer>  

footer { 
width: 100%; 
position: absolute; 
padding: 10px 0 10px 0; 
left: 0px; 
bottom: -50px; 
text-align: center; 
word-spacing: 20px; 
font-size: 75%; 
} 

Answer 1

나는 이것을 경험했다. iPhone은 % 글꼴 크기를 다른 브라우저와 다르게 렌더링합니다. 특히 여러 개의 %가 변경된 여러 요소 내부에 중첩 된 경우 (예 : <footer>이 다른 요소의 내부에있는 경우 75% 글꼴 크기 선언).

75 %를 0.75em으로 변경하거나 백분율이 아닌 다른 값을 사용하는 경우 사업에 복귀해야합니다.

footer { 
width: 100%; 
position: absolute; 
padding: 10px 0 10px 0; 
left: 0px; 
bottom: -50px; 
text-align: center; 
word-spacing: 20px; 
font-size: 0.75em; /* or 10pt, or... */ 
}