如何自动缩放移动页面

Question

我有一个page，我希望在移动版中成为look like this。

但是当我在移动设备上打开它时，它是like this。

如何进行自动缩放。

  

注意：如果用户尝试缩小＆amp;放大它应该不起作用。

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。

这将根据屏幕宽度自动调整＆amp;高度。

根据要求，

Media Query 可能不会 。

Answer 3

对于移动设备的媒体查询，请使用以下命令：

zoom: 150%;