So i got a client that wants the site to look on mobile exactly like on desktop (small text and all). the issue im encountering is that the site zooms on mobile so i figured im doing something wrong.
i used this code:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0">
with this it loads it zoomed, if i change the initial scale to 0.1 i get white bars around the content and the text gets enlarged.
any idea how to achieve it properly? JS or something?
thank you.
You have to use media query to make your site mobile-responsive and you only need to add this code in your <meta> tags.
<meta name="viewport" content="with=device-width, initial-scale=1.0">
You can use media query like this. In here 500px is based on mobile device width, It means all css properties in media query will run if your device width is below 500px. Otherwise it will load default css properties which you wrote earlier in the document.
@media all and (max-width: 500px) {
/*Your
Changing
CSS
Properties*/
}You can learn more about media query in this article.