如何自动缩放移动页面

Question

我有一个页面,我想在移动设备上看起来像这样.

但是当我在移动设备上打开它时就像这样.

怎么做才能自动缩放.

注意:如果用户尝试缩小和放大,则不起作用.

Answer 1

使用CSS媒体查询并设置包装器 (max-width: /*your desired viewport*/) 并控制包装器 的宽度和字体大小. https://www.w3schools.com/css/css_rwd_mediaqueries.asp 如果您不希望用户放大,请使用此元视口

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

Answer 2

最好的办法就是复制： <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>在head tag。

这将根据屏幕宽度和高度自动调整。

Media Query 根据要求，可以/可以不添加。