I have a webpage and it is divided into sections, each section has a title div and a content div which expands upon clicking the title.

The title div has a font-size of 2rem and content div has a font-size of 1.8rem. The root has a font-size of 62.5% (for easier conversion, so on a desktop 1rem=10px).

On my desktop the title has a computed font size of 20px and the content has a computed font size of 18px, which is exactly as expected.

However when I use the Chrome dev tools to view the page as a mobile device (or if i view the page with my smartphone) the title has a computed font size of 20px and the content has a computed font size of 43.0718px (changes depending on device) which means the content is readable but the titles are so small you can barely read or click them.

CodePudding user response：

Try add this in your head tag in HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">