Search code examples
htmlcsswidth

Why do the table width and text size scale differently relative to each other?

This is a screenshot of a website with a screen width of 1000px: Screenshot 1000 width

This is a screenshot of the same website with a screen width of 460px" enter image description here

Notice in the first image, the unordered list is "smaller" than the table width. But in the second image, the unordered list is "larger" than the table width.

This is the website in question: {{ EDIT: Link no longer relevant to this question, removed }}

I like the way the page looks on desktops (aka, the wider screenshot on top). But on mobile, the scale of everything seems off. The text is so much larger (relatively) than the text in the table.

Why is this happening? How can I fix it so that both mobile and desktop websites look the same?

EDIT: The images were taken with Chrome's "Screenshot" tool in the Inspector. I did verify the behavior is consistent using my actual mobile phone though.

Solution

  • It looks like this was caused due to this CSS attribute:

    text-size-adjust

    I set it to 100% at the HTML level and that sorted it out:

    html { text-size-adjust: 100%; }

    This fixed it for me. But do note that text-size-adjust has rather limited support:

    https://caniuse.com/#feat=text-size-adjust