web: Small radio boxes on iPhone with 3x display

mercredi 8 août 2018

I'm facing the problem of small radio buttons on an iPhone 6s Plus. Everywhere else the radio buttons look normal

I'm able to simulate this with Safari on macOS and the problem is related to the display pixel ratio. Using 3x the radio button is small:

Using 1x or 2x the radio button is big:

I reduced my HTML code to the bare minimum:

<html>
  <body>
    <input type="radio">Yes<br/>
    <input type="radio">No<br/>
   </body>
</html>

This is bad because the mini radio buttons are very difficult to tap. But how can I avoid this behavior?

Setting width and hight to a fixed value (12px or 12pt) didn't help.

Thank you!

web