[BUG] The code in code block can't align with the line number in iOS mobile devices

[Triple-Z]

Describe the bug

• Device/Os: iOS15.6
• Type: Mobile
• Browser and version [e.g. Chrome 86.0]: Safari, Firefox 103.1, Chrome 104.0
• Hugo Version [ >=0.83.0 expected]: v0.101.0+extended
• Theme Version [e.g. v4.0, master, or commit-id ]: 61452c190b57ed2c1246723e7fd1575ac4bf5a23

Steps to reproduce the behavior:

Use a browser(no matter what: Safari, Firefox or Chrome) in an iOS mobile device to open a page that has a least one code block with line numbers.

Expected behavior:

The code lines should align with the line numbers.

Screenshots

Safari:

Firefox:

Chrome:

If you disable the markup.highlight.lineNos in config.yaml, the code is fine with line numbers:

Additional context

If you need further testing, feel free to use this example page: https://58bed0b1.my-hugo-blog.pages.dev/posts/chaosblade-specific-cpu-load/

[drowzy]

I had a similar issue with variable font-sizes on ios devices. The fix outlined here: https://github.com/adityatelange/hugo-PaperMod/issues/828#issuecomment-1171994855 solved it for me.

code {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

[Triple-Z]

@drowzy thx very much, this solution works!