CSS / Bootstrap: el tamaño de la fuente no se cambia correctamente de la computadora al dispositivo móvil: la fuente en el dispositivo móvil parece tan pequeña

Este es mi CSS:

@media(max-width:767px){body { font-size: 22px; }}
@media(min-width:768px){body { font-size: 20px; }}
@media(min-width:992px){body { font-size: 16px; }}

Cuando cambio el tamaño de la ventana del navegador en mi computadora portátil, cambia de tamaño correctamente. Pero este es mi problema: cuando visito mi sitio web desde mi dispositivo móvil, el tamaño de la fuente es demasiado pequeño (no estoy seguro de por qué, pero 22px en mi dispositivo móvil es tan pequeño que tengo que hacer zoom correctamente). Cuando aumento el tamaño de fuente para anchos de pantalla más pequeños a 40 px, se ve bien en mi dispositivo móvil, pero cuando voy y visito el sitio web desde mi computadora portátil y cambio el tamaño de la ventana de mi navegador a un ancho menor, 40 px es demasiado grande y termina asumiendo el control de toda la pantalla.

22px en mi dispositivo móvil parece tan pequeño. ¿Hay alguna forma (con Bootstrap o CSS puro) de solucionar este problema? Por problema, quiero decir, 22px es demasiado pequeño, pero 40px es perfecto en mi dispositivo móvil. Sin embargo, es exactamente lo contrario (22px es perfecto pero 40px es demasiado grande) en mi computadora.