如何使我的网页适合移动？

Question

我知道有很多关于使用视口将网页安装到移动屏幕的帖子。我仍然无法找到合适的答案，使我的页面适合移动屏幕。我尝试过不同的视口方法，但它们都没有工作。所以现在我总是需要捏和缩小以达到我需要的比例。 url = http://www.moworkflow.nl/test/responsiveapplogin.php

到目前为止没有工作;
＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;
＆lt; meta name =“viewport”content =“initial-scale = 1，maximum-scale = 1”＆gt;
＆lt; meta name =“viewport”content =“width = 500，initial-scale = 1”＆gt;

如此具体，当我的网页在移动设备上打开时，它打开如下：

但是当我打开我的页面时它必须如下所示，所以我不必缩放出去了

Answer 1

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

试试。

这与您所拥有的不同，所以我不确定您的元标记为何无法正常工作。

您的CSS或媒体查询中的其他任何地方是否可以使用缩放集或其他形式的标量？

Answer 2

我会说选择一个屏幕宽度，你的网站看起来很棒，然后把这个宽度放在这个元标记中以取代860

<meta content='width=860, maximum-scale=1.0, user-scalable=0' name='viewport' />

这应该做的是忽略设备宽度并使用此宽度，您也可以尝试不同的数字，如1260,1024,960,768等。

请确保您没有多个名为='viewport'的元标记，如果您这样做，请将其全部删除并仅保留一个。