When I set font zoom in system or browser settings on Android some elements on my website are zoomed, but some are not. The simplest way to see this is creating two paragraphs - one with just text and the other with text and button. The first one is zoomed and the other is small. How to make them same size?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque, eaque adipisci? Necessitatibus, aut at quia officiis, aspernatur, repellat iste fugit placeat eveniet illum quaerat. Ipsa fuga, praesentium voluptatum laboriosam et, est at officiis ducimus quidem sequi, debitis fugit eligendi nam sapiente rem tempore recusandae voluptatibus magnam voluptate cupiditate? Excepturi, dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis dolore tempora officia libero nisi molestias aperiam rem dignissimos id, ea dicta eveniet ad laborum debitis atque magnam doloribus in soluta a! Laudantium nihil ut adipisci soluta placeat itaque minus sint voluptate eveniet veritatis asperiores eos ea, necessitatibus libero repellat reiciendis. <button>Lorem, ipsum.</button></p>
</body>
</html>
Just setting a font-size of course doesn's solve the problem.
Screen with no zoom:
https://i.stack.imgur.com/o5w3m.png
Screen with system font zoom:
https://i.stack.imgur.com/uhnWq.png
Screen with browser font zoom:
https://i.stack.imgur.com/gaD5S.png
I also noticed that changing system interface size works fine:
https://i.stack.imgur.com/eBlIX.png
How to achive the same result with font zoom?
