How to auto zoom page for mobile

Question

I have a page, I want to be it look like this in mobile.

But when I open it in mobile it is like this.

How to do that so that it is auto zoomed.

Note: If the user tries to zoom out & zoom in it should not work.

Answer 1

For media queries of mobile devices use this:

zoom: 150%;

Answer 2

Use CSS media queries and set the wrapper in (max-width: /*your desired viewport*/) and control the width and font-size of your wrappper. https://www.w3schools.com/css/css_rwd_mediaqueries.asp If you don't want users to zoom in, use this meta viewport

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 3

The best thing to do is just copy: <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> in head tag.

This will auto adjust according to the screen width & height.

Media Query May / May not be added, as per requirements.