Once upon a time, I came across an insightful article detailing a method to size text using CSS that is compatible with multiple browsers. The approach outlined in the article includes:
body {
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
font-size:0.75em; /* 16x0.75=12 */
}
This technique works effectively on most browsers, except for Safari on the iPhone, which tends to enlarge specific text segments. Is there a way to prevent this inconsistency from occurring?
Typically, adding -webkit-text-size-adjust: none; would address the issue by stopping the iPhone from enlarging text sizes. However, after reading this article, it appears that this approach restricts users from zooming in on text in any Safari browser - posing a different challenge. While aware of a CSS-only solution, pinpointing it has been elusive. My goal is to determine the correct method of setting font sizes to ensure consistent display across all browsers, including iPhones.
Update: As an illustration, when viewing this site on an iPhone, you'll observe that the paragraph text appears significantly larger than other content on the page. Why does this anomaly occur and how can one preemptively identify such discrepancies within the code?