即使我有元视口，移动设备上的网站似乎也被放大了。我有什么遗漏的吗？

Question

当我编辑媒体查询时，一切似乎都很好。然后我上传并注意到网站首次加载时的放大效果。我有元视口标签和媒体查询，但我不知道出了什么问题？

我已经尝试多次更改CSS和不同的视口比例，但我无法让它像我想要的那样缩小。我只是想让它在移动设备上看起来正常，而不必在打开网站时缩小。

网站是： https://trexperts.myfsoservice.com/pipelinequestionaire.html

我使用的视口是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

网站是： https://trexperts.myfsoservice.com/pipelinequestionaire.html

Answer 1

这确实与

<meta>

标签无关。这里发生的一些事情导致了这种情况。其中大部分是一些硬编码的宽度和一些并不是真正响应的东西。

首先，我将使用以下命令将

box-sizing: border-box;

添加到您的全局样式中：

*, *::before, *::after {
    box-sizing: border-box;
}

这将为所有元素添加

box-sizing: border-box;

，这将使其在处理宽度时更加一致。现在，填充将包含在宽度中，而不是添加。

其次，

#bottom

的宽度为硬集

width: 650px;

。这使得页面滚动。在这里，我们应该将宽度设置为

width: 100%;

并将最大宽度设置为

max-width: 650px;

。

第三，看一下标题图片，它有一个

margin-left: 50%;

。删除它。它将徽标推离屏幕。您可能需要进一步调整该项目的大小。

最后，移除

margin-left: 35%

上的

#form_container

。最好使用类似

margin: 0 auto;

之类的东西。这样它就会居中

#form_container

，而不需要您使用百分比左边距。

最后，这应该使

#form_container

占据整个空间，而无需额外缩放 – 侧滚动。