视口元标记不起作用，网站在 mobil 上呈现缩小答案

【问题标题】：Viewport meta tag doesn't work, website renders with zoom-out on mobil视口元标记不起作用，网站在 mobil 上呈现缩小
【发布时间】：2016-02-03 22:05:41
【问题描述】：

所以，我正在向网站添加一些响应式内容，通常这没有问题，但由于某种原因，页面在刷新时呈现缩放（0.3）。所有的 CSS 更改都已实现，只是初始缩放很奇怪。

我在我的<head> 中使用它：

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

响应式的东西在这个标签内：

    @media screen and (max-device-width: 767px) {
    /*responsive stuff that works*/
    }

如果您想自己看一下，该页面是：http://utt.se 感谢您的帮助！

【问题讨论】：

【解决方案1】：

尝试删除<meta>标签中的所有逗号：

<meta name="viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 user-scalable=no" />

【讨论】：

【解决方案2】：

通过查看您的网站，我发现 .blogContent 设置了宽度，#mainContent 也设置了宽度。

将它们都更改为 width: 100% 似乎可以为我在 chrome 上修复它

【讨论】：

【解决方案3】：

您也可以将缩放视口属性放在 css 中

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

【讨论】：

【解决方案4】：

您还应该将宽度值替换为最大宽度

替换这个

.contentCon ul li {
  width: 340px;

为此

.contentCon ul li {
  max-width: 340px;

【讨论】：