<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you want your website to be displayed correctly on a mobile or tablet device you need to use the ‘viewport’ metadata in your html file. The content width can be set to different values like content="width=320px"
.
Initial scale property controls the zoom level of the screen when first loaded. Eg: you could have a different zoom when first loaded initial-scale=0.8
Many mobile devices increase the text size in order to be more readable, therefore the text will be made bigger than initially styled. To have your initial size of text kept over the mobile devices browsers use: text-size-adjust: 100%;
Not all the browsers support this style so please check the compatibility on https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust