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.
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.
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" />
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.
For media queries of mobile devices use this:
zoom: 150%;