如何调整手机屏幕大小以显示优化的 UI web 应用程序版本？

Question

I am using react, Bootstrap,and some custom sass to build and style my front end web app, the design looks good on mobile but you need to pinch the screen(it looks zoomed in a little) to adjust to the screen width properly, how can I configure the media query properly to fix this? the screenshots(before fingers adjustment and after) will explain more!

before adjustment with fingers after adjustment with fingers

Answer 1

this issue has been resolved, if you ever encountered a similar problem where a screen zoomed-in on mobile try this meta line by posting it on your HTML head tag!

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>