html - size of ordered list numbers in front of linked list items on iPhone

Question

I made a site that has an ordered list, for which some items on the list are links, and others are not. Everything renders fine on a PC. On my iPhone, however, the numbers in the ordered list show up smaller than they are supposed to if the list item is a link.

To make sure that it wasn't just some obscure issue with my particular html, css, etc., I made the following html document, called test_1.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <ol>
   <li>here.</li>
   <li><a href="test_1.html">here.</a></li>
   </ol>   
</body>
</html>

The issue persists even with this extremely minimal example.

Does anyone know how to fix this?

Thanks!

This varies from browser. You could use CSS to hard-code a specific size however. — JediBurrell, Mar 30 '17 at 07:03
I am not sure how to use CSS to fix this, since the issue only occurs when the list item is linked. E.g., in the above example, the number in front of the second list item shows up smaller than the does number in front of the first (which has the correct size). — user3558855, Mar 30 '17 at 17:40
Thanks, I just gave a few variations on that a try. Still no luck unfortunately. — user3558855, Mar 30 '17 at 21:53

score 0 · Answer 1 · edited May 23 '17 at 10:30

I stumbled onto a fix for this issue here. The solution was the following CSS code:

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

Incidentally, this also fixed an issue with the site on my iPhone where one of the fonts on the page would not always load at its assigned size, but would seemingly randomly change sizes sometimes when I refreshed the page. E.g., it would sometimes load at its assigned font-size: 34px;, but other times load at e.g., 14px.

html - size of ordered list numbers in front of linked list items on iPhone

1 Answers1