How to auto zoom page for mobile

2019-07-12 15:33发布

问题:

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.

回答1:

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" />


回答2:

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.



回答3:

For media queries of mobile devices use this:

zoom: 150%;