Question

所以，我正在向网站添加一些响应式内容，通常这没问题，但由于某些原因，页面渲染时会刷新（在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 谢谢你的帮助！

Answer 1

尝试删除<meta>代码中的所有逗号：

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

Answer 2

通过查看您的网站，我看到.blogContent上设置了宽度，#mainContent也是如此。

将这些更改为width: 100%似乎在我的Chrome上修复它

Answer 3

您还可以在css

中放置缩放视口属性

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

Answer 4

您还应该将宽度值替换为max-width

替换此

.contentCon ul li {
  width: 340px;

这个

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