After creating a web app and styling it with bootstrap 4, I incorporated a media query to adjust font size and padding on mobile devices. The code snippet used for this purpose is as follows:
@media (max-width: 1200px) and (orientation: portrait) {
.container {
min-width: 100%;
/* font-size: 120%; */
}
}
Although designed keeping in mind the resolution of most smartphones being 1080p, an issue arose where upon interacting with input fields, the UI would zoom out and resemble the desktop browser view.
By removing the property (orientation: portrait), the previous problem was resolved. However, this led to a new challenge where CSS from the media query started affecting desktops with HD or lower resolutions, resulting in expanded input fields and increased font size.
Despite trying various online solutions such as using user-scalable=no in the meta tag, the issue persisted.
<meta name='viewport' content='user-scalable=0'>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
If anyone can provide guidance on how to resolve this error, it would be greatly appreciated.